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，请尝试this way。

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
}

保持图像在滚动DIV中加载

5 个答案: