0

我想预加载 5-6 张图片，以便在用户向下滚动时显示它们（facebook-like-auto-load-on-scroll）。因此，当用户向下滚动时，无需进一步加载即可显示图像。我之前使用了以下 CSS 代码：

img.not-load
{
 display:none;
}

所以，当使用 jQuery 时，我让它们可见，它们在没有加载的情况下出现。但问题是，页面加载时间增加了。我想仅在加载完整页面后使用 jQuery 加载图像。我尝试使用 jQuery $(document).ready(function(){ ... });，但它几乎以相同的方式工作，即在页面加载时加载所需的图像。我希望你能理解我的问题。我是 jQuery 的初学者，需要一些线索才能继续进行。提前感谢您的帮助...

4

3 回答 3

1

您将使用该$(window).on('load')事件而不是$(document).ready()您尝试的事件。

这将在触发之前等待页面上的所有元素加载。

$(window).on('load', function() { 
   // Perform tasks after everything has loaded.
});
于 2013-06-18T12:46:36.613 回答
0 
<html>
<head>
    <title></title>
    ...
    <script>
        $(function() {
            ... pre-load your images here ...
        });
    </script>
</head>
<body>

</body>
</html>
于 2013-06-18T12:50:48.510 回答
0

你需要的是lazyload像这样重新制作你的img标签

 <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

并添加 javascript

  $("img.lazy").lazyload();

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

于 2013-06-18T12:49:41.060 回答