以前的网站带宽小，没有特别多的大图，现在不同了，各种图片网站如同雨后春笋层出不穷。服务器是抗住了，但是客户端就有意见了，太多的图片必然导致页面加载缓慢，特别是有些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" alt="JQuery图片延迟加载插件,动态获取图片长宽尺寸_html/css_WEB-ITnose" >
$(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
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
791
收藏
