龙都娱乐»JavaScript»Image Lazy Load:那些延时加载图片的开源插件(jQuery)

Image Lazy Load:那些延时加载图片的开源插件(jQuery)

来源:ourjs 发布时间:2015-04-20 阅读次数:
  图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源。

  unveil

  这是一款十分轻量级的片时图片加载组件   支持现代浏览器及IE7+, Github上面有将近3K个star(关注)   使用   一般图片 <img src="bg.png" data-src="img1.jpg" />   对于支持 retina (视网膜屏幕) 设备 <img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />   应用 $(document).ready(function() {   $("img").unveil(); });   支持回调 $("img").unveil(200, function() {   $(this).load(function() {     this.style.opacity = 1;   }); });   支持手动触发  $("img").trigger("unveil");

  jquery_lazyload

  可以延时加载大型网站的图片,当滚动到区域时再进行渲染。Github上面有4K个关注。   使用   引用jQuery和lazyload.js <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>   需要延时加载的图片 <img class="lazy" data-original="img/example.jpg" width="640" height="480">   应用 $(function() {     $("img.lazy").lazyload(); });

  echo

  一个独立徽型JavaScript图片延时加载库。不依赖jQuery,压缩后仅2K。   支持IE8+   使用  <body>   <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">   <script src="dist/echo.js"></script>   <script>   echo.init({     offset: 100,     throttle: 250,     unload: false,     callback: function (element, op) {       console.log(element, 'has been', op + 'ed')     }   });   // echo.render(); //手动触发调用   </script> </body>

  layzr.js

  前几天刚刚发布的一款Image Lazy Loading组件,小,快,无依赖(不依赖jQuery),同样支持retina设备。 <script src="layzr.min.js"></script> <img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image"> <script> var layzr = new Layzr({  attr: 'data-layzr',  retinaAttr: 'data-layzr-retina',  threshold: 0,  callback: null }); </script> 

  更新

  那么,如何让服务器端将一堆HTML中的img转变成data-src呢?其实很简单,几行正则就可以了,比如在node.js中可以这样将img的src转换成data-src(可直接按F12在浏览器的Console中运行) var html = '包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML' html = html.replace(/<img[^>]+>/g, function(imgstr, idx) { imgstr = imgstr.replace(' src=', ' data-src=') return imgstr })
QQ群: WEB龙都娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共1条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共1条评论
登录会员中心
龙都娱乐