当图像进入视区时延迟加载图像

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

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

LazyReady: http://plugins.jquery.com/project/LazyReady

您可以尝试我编写的这个jquery插件,它使用HTML注释来延迟加载任意位的HTML,包括图像:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

下面是一个例子:

<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,因为它在只有注释的情况下呈现为0维。

希望这有帮助! @ MW·科林斯