Question

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

img.not-load
{
 display:none;
}

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

Answer 1

您可以使用$(window).on('load')事件代替您尝试过的$(document).ready()。

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

$(window).on('load', function() { 
   // Perform tasks after everything has loaded.
});

Answer 2

你需要的是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

Answer 3

<html>
<head>
    <title></title>
    ...
    <script>
        $(function() {
            ... pre-load your images here ...
        });
    </script>
</head>
<body>

</body>
</html>

仅在整页加载后预加载图像

3 个答案: