Jquery 当图像进入视口时，延迟加载图像

我最近遇到过一些博客/网站，它们只在图像滚动到可见视口时加载图像。然后，它会将它们淡入淡出。是否有jQuery。。。甚至Wordpress插件也能做到这一点

---

e、 g.

JavaScript的一个优点是，您可以查看源代码并查看正在发生的事情。查看源代码后，我发现：

---

LazyReady:

您可以尝试我编写的jQuery插件，它使用html注释延迟加载任意html位，包括图像：

下面是一个例子：

<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 css img背景，任何。
–>
$（文档）.ready（函数（）
{
$（'pre.i-am-lazy'）.lazyLoad（）；
});

因此，基本上，您可以使用占位符标记和内部html注释包装要延迟加载的内容。当占位符在视口中可见时，它将替换为注释中的html字符串

您可以对占位符使用任何标记，但我喜欢pre，因为当占位符中只有注释时，它会呈现为0维

希望这有帮助！

---

@MW_Collins

对用户来说似乎真的很烦人……双重欺骗！只有我一个人回答了两次这个问题。Dupe 1 Dupe 2现在找不到其余的问题，但如果我没记错的话，LazyLoad是所有这些问题中的首选。Page已经不存在了。