Question

我想在使用jquery和co操作它们之前预加载所有元素。我认为我可以使用display: none创建一个div并将所有元素放在那里我用于我的网站。

<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 */ 
});

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

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

Answer 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上懒得加载所有这些图片，这样他们就会在上面的图像可见并准备就绪后开始淡入。

preload元素没有显示div

1 个答案: