JQuery图片延迟加载插件,动态获取图片长宽尺寸

以前的网站带宽小，没有特别多的大图，现在不同了，各种图片网站如同雨后春笋层出不穷。服务器是抗住了，但是客户端就有意见了，太多的图片必然导致页面加载缓慢，特别是有些table结构的站点更是如此。能否让图片在页面加载完成后再加载？我想这是大多数站点管理员都很关心的问题，现如今图片延迟加载技术已经不是什么稀罕东西了，尤其是JQuery的普及想要写个简易的延迟加载的代码那是信手拈来。

我们都知道一般的img标签都有个src的属性，浏览器在解析img标签的时候就会读取src属性的值，并从值所指向的地址获取到图片。如果我们在写img标签的时候图片地址不写在src属性上而是写在data-original上这样浏览器就不会去图片地址上获取图片了。当我们需要加载这张图片的时候，我们偷梁换柱将data-original属性换成src属性不就大功告成了。

以上是思路，下面我们开始行动。

<img data-original="http://www.zheng-hang.com/zb_users/upload/2015/04/201504051428245988387483.jpg">

$(function(){
    $("img").each(function(i,n){
        var img_path = $(n).attr("data-original");
        $(n).attr("src",img_path);
    })
})

　　

　　

 

这是最原始的延迟加载，因为我们都知道这段js代码会在页面加载完成后再执行，也就是说用户在看到图片前就已经可以操作页面了，从而不会影响用户的使用。但是这段代码无法满足用户多样的需求，比如说有人想在页面加载真正图片前显示一张默认图片，例如加载中的gif图片。

还有的图片在页面的可视范围的下方，只有用户滚动到一定高度的时候才会显示出来，这样的图片就没必要在页面加载的时候就显示出来，我们也可以通过插件来实现。这个时候就不是三言两语javascript就能做到的，我们可以自己动手写个jquery插件来完成我们的工作。

下面就亲手奉上我自己写的插件jquery.lazyload.js