javascript - 将图像加载到滚动 DIV 中

Question

我在图像库的滚动 DIV 中有许多图像，并且只有在向下滚动后它们在 DIV 中可见时才会加载图像。这导致 DIV 在尝试加载图像时冻结。有什么办法可以解决这个问题吗？我敢肯定它可能与javascript相关。

只是我的简单 DIV。

<div style="width:275;height:400;overflow-x:scroll;">

content

</div>

Answer 1

http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

您可以使用 javascript 预加载图像

Answer 2

您需要预加载图像。如果您不想使用 Javascript，请尝试这种方式。

Answer 3

是的，事实上有许多相关的库用于此目的。主要用于旧浏览器的带宽节省目的，但会做与您在这里想要的相同的工作。

http://yuilibrary.com/yui/docs/imageloader/

http://www.appelsiini.net/projects/lazyload

同时，如果您的图像尺寸非常大并且它们的行很长，请记住在它们从视图中不可见后隐藏（显示：无）它们。

Answer 4

尝试使用这个延迟加载脚本，它将在图像到达可见区域之前加载固定数量的像素之前的图像。这有很多选择

http://www.appelsiini.net/projects/lazyload

Answer 5

function expandDiv(idOfDivElement) {
    divObj = document.getElementById(idOfDivElement);
    var imageObj = document.createElement('img');
    imageObj.setAttribute('src', 'path/example_image.jpg');
    divObj.appendChild(imageObj);
    // your expand div code here
}