开发者社区> 问答> 正文

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

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

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

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

现在免费分享给阿里云的朋友们,使用方法非常的简单哦!

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"/>
然后保存,该更新缓存的更新缓存。

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

展开
收起
zhuangdengyun 2012-05-14 04:08:25 29331 0
68 条回答
写回答
取消 提交回答
  • Re图片延迟加载代码和使用方法免费分享
    学习了
    2014-09-04 17:49:54
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    淘宝的延迟加载JS
    2014-05-18 17:43:55
    赞同 展开评论 打赏
  • 来看看,好东西
    2014-04-22 21:23:29
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    是针对全站的么?????????

    -------------------------

    Re图片延迟加载代码和使用方法免费分享
    是针对全站的么????????? 怎么恢复 出错了???
    2014-04-02 04:38:01
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看起来很是不错
    2014-03-13 16:21:49
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    这个和discuzX2.5中的加载功能能不能共用啊!
    2014-03-11 16:09:35
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    这非常有用!!!
    2013-10-31 12:31:51
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
      
    2013-09-25 11:45:26
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    好东西 啊
    2013-09-24 19:48:12
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    不知道能不能用在DZ上的,看看能不能修改的。
    2013-09-17 21:06:49
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    谢谢分享!!!!!!!看看怎么用
    2013-09-06 10:37:13
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看看
    2013-09-02 10:03:24
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    已经用上了,很不错。
    2013-06-04 13:50:25
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看看
    2013-06-03 19:32:12
    赞同 展开评论 打赏
  • 回楼主zhuangdengyun的帖子
    不知道效果怎麼樣?
    2013-05-30 20:26:43
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看看
    2013-05-28 13:19:49
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    接下来就开始享受延迟加载带来的好处吧
    2013-05-28 07:15:12
    赞同 展开评论 打赏
  • 真不错。
    2013-05-25 12:20:19
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看一看~~~
    2013-05-24 14:50:21
    赞同 展开评论 打赏
  • Re图片延迟加载代码和使用方法免费分享
    看下怎么回事
    2013-05-13 10:16:39
    赞同 展开评论 打赏
滑动查看更多
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务 立即下载
SEO学习步骤 立即下载
QQ移动页面框架优化实践 立即下载

相关实验场景

更多