logo标签列表

当图片进入视口时进行惰性加载。

jqueryimagelazy-loading
7

最近我发现一些博客/网站只有在它们被滚动到可见视窗时才加载图片。然后它们淡入。是否有一个jQuery甚至是WordPress插件可以做到这一点？

例如：http://icodeblog.com

2
似乎对用户来说真的很烦人... - Glennular
2
重复的问题！我独自在SO上回答了这个问题两次。 - Pekka
2
复制1 https://dev59.com/00nSa4cB1Zd3GeqPOHr8 - Pekka
复制2 https://dev59.com/Q3I95IYBdhLWcg3wvwsQ - Pekka
现在找不到剩下的内容了，但如果我没记错的话，LazyLoad 是所有这些问题中的最佳选择。 - Pekka
显示剩余3条评论
3个回答
7
2
页面已经不存在了。 - NDi
1
你可以尝试我编写的这个jQuery插件，它使用HTML注释来延迟加载任意的HTML内容，包括图片： jQuery懒加载博客文章 jQuery懒加载插件页面 以下是一个示例：
<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

所以基本上你需要用占位符标签和内部HTML注释来包装你想要延迟加载的内容。当占位符在视口中变得可见时，它将被替换为注释中包含的HTML字符串。

你可以使用任何标签作为占位符，但我喜欢用pre，因为只有在里面有注释时，它才呈现为零维度。

希望这有帮助！@ MW_Collins

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接