0

我想在使用 jquery 和 co 操作之前预加载我的所有元素。我认为我可以制作一个 divdisplay: none并将我用于我的网站的所有元素放入其中。

<div id="preload" style="display: none">
     <img src="1.png" />
     <img src="bla.gif" />
     <img src="another_one.png" />
     <img src="cutelittlekitten.png" />
</div>

然后这会淡入我的网站。

$('#preload img').load(function() { 
        /* Site fades in all elements are preloaded */ 
});

这样做有什么缺点吗？如果，为什么，也许还有另一个更好的解决方案？

编辑：我想预先缓存图像！

4

1 回答 1

1

缺点是你让人们等待。只是延迟加载您的图像 - 您使用合法src属性的首屏上方的任何图像，以及首屏下方的任何图像，您都可以执行以下操作：

<img class="lazyload" src="images/clear.gif" data-src="path/to/real/image.jpg" />

然后，您可以使用这样的插件或编写自己的插件，以在滚动时使用“lazyload”类淡入图像，如果它们出现在可见窗口区域中：

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

您也可以简单地延迟加载所有这些图像，window.load以便在首屏图像可见并准备好后它们会开始淡入。

于 2013-05-30T16:54:18.083 回答