$(obj).attr(“src”,src);
$(obj).fadeIn(200);
}
var funOnError=function(n,total,src,obj){
console.log(“the “+n+”st img loaded Error!”);
}
调用示例：
console.log(“loading…”);
loadimg($(“img”),funloading_obj,imgonload,funOnError);
/*loadimg([“https://www.easck.com/d/file/200519/20200519073021505.jpg”,
“/20120531/1670912_103610084349_2.jpg”,
“/20120616/4952071_130629530136_2.jpg”,
“/20120610/1723580_105037029000_2.jpg”,
“https://www.easck.com/d/file/200519/20200519073021506.jpg”
],funloading,imgonload,funOnError);*/
上面算是原生态写法了，下面我们介绍一个基于Lazy Load, 延迟加载图片的 jQuery 插件
Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1×1 像素灰色 GIF 图片. 并且需要将真实图片的 URL 设置到 data-original 属性. 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
处理图片的代码如下.
$(“img.lazy”).lazyload();
这将使所有 class 为 lazy 的图片将被延迟加载. 可以参考基本选项 demo
设置敏感度
几乎所有浏览器的 JavaScript 都是激活的. 然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片. 当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内.
<img class=”lazy” src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
<noscript><img src=”img/example.jpg” width=”640″ heigh=”480″></noscript>
可以通过 CSS 隐藏占位符.
.lazy {
display: none;
}
在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.
$(“img.lazy”).show().lazyload();
这些都是可选的, 但如果你希望插件平稳降级这些都是应该做的.
设置敏感度
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置 threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
