Question

考虑这两种情况：
High-defs vs Low-defs

当滚动图片时，高清版与低版图存在明显滞后如果调整实际照片的大小不是一个选项，那么我该怎么做才能使高清列表的滚动更顺畅呢？

Answer 1

在加载页面的同时加载所有图像并不是一个好主意。页面加载时间是用户拒绝的瓶颈。为了创造出色的用户体验，我建议LazyLoad plugin。它仅将图像加载限制为视口，当用户向下滚动页面时加载其他视频。太棒了。

另一个好的做法是划分宽度和高度，以便浏览器不需要repaint and reflow。

如果你不喜欢这些提示，你可以实现一个javascript队列来加载图像。：

images = [];

for (var i in t){ 
    images.push(t[i].image_url);
}

function loadNextImg() {
    if (!images.length) return false;

    var img = new Image();
    img.alt = "your-alt";
    img.width = 150;
    img.onload = loadNextImg;

    img.src = images.splice(0,1);
    document.body.appendChild(img)
}
loadNextImg();

不幸的是，这种方法没有利用并行下载，但使过程更加顺畅。只需稍加修改，您就可以同时下载多个图像。您可以在此处找到此代码：http://jsfiddle.net/ubgeLq2s/

许多照片时滚动滞后

1 个答案: