你的位置:首页 > 网页设计

[网页设计]JQuery图片延迟加载插件,动态获取图片长宽尺寸


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

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

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

<img src="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图片。

gray.gif

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

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