仅在整个页面加载后才预加载图像答案

【问题标题】：Preload image only after the full page has loaded仅在整个页面加载后才预加载图像
【发布时间】：2013-06-18 12:44:35
【问题描述】：

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

img.not-load
{
 display:none;
}

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

【问题讨论】：

appelsiini.net/projects/lazyload
尝试 JQUERY LAZY LOAD - appelsiini.net/projects/lazyload
我认为这个话题讨论的是同一个问题：stackoverflow.com/questions/807878/…

标签： javascript jquery image preload

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你需要的是延迟加载像这样重新制作你的 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

【讨论】：

【解决方案3】：

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

</body>
</html>

【讨论】：