js动态加载image导致浏览器很卡


function addImage(logo,userid,name,style){
    console.log("addImage");
    var img = new Image;
    img.src = photowall.allPhotosAPI() + '/' + logo;
    $(img).load(function(){
        var $person='<a '+style+' class='+randomClass()+' href='+'user.html?'+userid
            +'><article>'+'<img src='+img.src+' />'+'<span>'+name
        +'</span>'+'</article></a>';
        $container.append($person);
    });
}
$.ajax({
    url:photowall.allUsersAPI(),
    type:'get',
    dataType:'xml',
    timeout:1000,
    success:function(xml){
        $(xml).find('varkrs').each(function(i){
            console.log("each");
            var $this = $(this);
            var userid = $this.attr('id');
            var name = $this.attr('name');
            var logo = $this.attr('logo');
            var style = calStyle();
            addImage(logo,userid,name,style);
        });
        $container.height((y_index + 1)*280);
    }
});

图片 JavaScript

盖楼di一块砖 10 years, 7 months ago

不要频繁操作 DOM, 浏览器娘会受不了的
把 '<a><img /></a>...<a><img /></a>' 先拼接好(前提是这个字符串不要憋得太粗大)
只要一次强力插入就爽到了

喝醉的海星 answered 10 years, 7 months ago

Your Answer