Image Lazy Load：那些延時載入圖片的開源外掛(jQuery)

ourjs發表於2015-04-20
jQuery

　　圖片延時載入技術對大流量的網站來說是十分實用的。目前圖片在網站中大量使用，如果不加處理的話會對伺服器和頻寬造成級大壓力，通過只渲染當前使用者可見區域的圖片，可以極大地減少網站的請求數，降低網路頻寬資源。

　　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
})

相關文章