Javascript 仅在加载完整页面后预加载图像_Javascript_Jquery_Image_Preload

Javascript 仅在加载完整页面后预加载图像

javascript jquery image

Javascript 仅在加载完整页面后预加载图像,javascript,jquery,image,preload,Javascript,Jquery,Image,Preload,我想预装5-6张图片，这样我可以在用户向下滚动时显示它们（类似facebook的自动滚动加载）。因此，当用户向下滚动时，将显示图像，而无需进一步加载。我在前面使用了以下CSS代码： img.not-load { display:none; } 因此，在使用jQuery时，我使它们可见，它们在没有加载的情况下出现。但问题是，页面加载时间增加了。我只想在加载了整个页面后使用jQuery加载图像。我尝试使用jQuery的$（document.ready（function（）{…}）但其工作方式几乎

我想预装5-6张图片，这样我可以在用户向下滚动时显示它们（类似facebook的自动滚动加载）。因此，当用户向下滚动时，将显示图像，而无需进一步加载。我在前面使用了以下CSS代码：

img.not-load
{
 display:none;
}

因此，在使用jQuery时，我使它们可见，它们在没有加载的情况下出现。但问题是，页面加载时间增加了。我只想在加载了整个页面后使用jQuery加载图像。我尝试使用jQuery的

$（document.ready（function（）{…}）

但其工作方式几乎相同，即在加载页面时加载所需的图像。我希望你能理解我的问题。我是jQuery的初学者，需要一些进一步的线索。我们将提前感谢您的帮助

您将使用事件，而不是像您尝试的那样使用

$（document）.ready（）

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

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

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

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


...
$（函数（）{
…在此预加载您的图像。。。
});

尝试JQUERY惰性加载-我认为本主题讨论了相同的问题：

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

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

</body>
</html>