jquery.unveil.js大小不到1K非常轻量的延迟加载插件

jquery.unveil.js大小不到1K非常轻量的延迟加载插件
jquery.unveil.js体积非常小的轻量级图片延迟加载插件,大小不到1K。使用这个插件可视窗口以外的图像将不会被加载,直到网页图片滚动到可视区域才会被加载,这样可以很好的提高网页加载的速度。该插件还可以根据屏幕分辨率自动加载普清或高清图。

入门指南

1、加入依赖库

<script src="js/jquery.min.js"></script>
<script src="js/jquery.unveil.min.js"></script>

2、图片标签中使用

这个插件使用起来非常方便,只需要在<img/>标签的src属性中使用占位符图像(在原始图像加载时显示的内容,比如), 并将实际图像的路径包含在“data-src”属性中。如果要为具有视网膜显示的设备提供高分辨率图像,则只需在“data-src-retina”属性中加入高清图像地址即可。
格式如下:

<img  src="[占位图]"  data-src="[原始普通图]" data-src-retina="[原始高清图]"  />

示例如下:

<ul>
    <li><img  src="images/loading.gif"  data-src="images/800x500-1.jpg" data-src-retina="images/1280x800-1.jpg"  /></li>
    <li><img  src="images/loading.gif"  data-src="images/800x500-2.jpg" data-src-retina="images/1280x800-2.jpg"  /></li>
    <li><img  src="images/loading.gif"  data-src="images/800x500-3.jpg" data-src-retina="images/1280x800-3.jpg"  /></li>
</ul>

3、脚本初始化

<script>
    $(function() {
        $("li img").unveil(300);
    });
</script>

the end