图片延迟加载代码和使用方法免费分享

nxdawei · 发表于 2012-7-6 19:45:43

很多站长空间或者VPS虽然是独享5M带宽的，可有时候单页图片太多了，在访问量大的情况下，会随时导致带宽到5M峰值。
这种情况下，最好的办法就是对图片做延迟加载，这样一来不仅访客打开网页快，而且对咋们的云主机带宽也起到很好的协调作用，不至于瞬间高带宽占用。

网上很多延迟加载代码都是浏览器显示到某个位置的时候才开始加载，这样体验很不爽。我对代码做了些优化，
优化后的代码是：即将浏览到的时候就开始加载，等浏览到的时候已经完全显示出来了，访客甚至感觉不到用了图片延迟加载，用户体验相当好！而且js代码还很少，只有2KB

效果演示：http://fx.dt23.com/img/a/yanchi.htm

现在分享给DZ的朋友们，使用方法非常的简单哦！

1、下载本帖中的附件js代码
2、将js上传到空间
3、调用js，如<script src="img/delayload.js"></script>
4、将需要做延迟加载的图片代码的src属性改为mce_src
如
<img src="img/fj/block/4b/42f5a6.jpg" width="120" height="120"/>
改为
<img mce_src="img/fj/block/4b/42f5a6.jpg" width="120" height="120"/>
然后保存，该更新缓存的更新缓存。

接下来就开始享受延迟加载带来的好处吧

钻石家族 · 发表于 2012-7-6 19:52:05

本帖最后由钻石家族于 2012-8-18 10:05 编辑

双手鼓掌{:soso_e113:}

站长之家站长论坛 http://www.mxej.net http://bbs.mxej.net http://www.qqzuanshi.net http://bbs.qqzuanshi.net

李渠 · 发表于 2012-7-6 21:01:33

谢谢分享支持下

www.taiqian.cc

nxdawei · 发表于 2012-7-10 21:46:14

李渠发表于 2012-7-6 21:01
谢谢分享支持下
www.taiqian.cc

喜欢你的二级导航代码分享下？

Fate．追魂 · 发表于 2012-7-10 21:56:33

傻瓜式教程，太好了，终于学会了。
如果能加上延迟加载等待图片就好了。

中梅 · 发表于 2012-7-10 22:00:43

谢谢分享

互乐 · 发表于 2012-9-18 13:37:10

这个不错的

小小太 · 发表于 2012-9-19 13:59:12

{:soso_e194:} 傻瓜式教程，太好了，终于学会了。如果能加上延迟加载等待图片就好了。

YYQTYZH · 发表于 2013-7-2 18:55:32

留个记号

勿忘我网 · 发表于 2013-10-10 14:07:34

上传图片麻烦不，不会一个加吧

		自动登录	找回密码
密码			立即注册

[素材] 图片延迟加载代码和使用方法免费分享

本帖子中包含更多资源

评分