Image Lazy Load：那些延時加載圖片的開源插件(jQuery)

時間 2019-11-18

標籤 image lazy load 那些延時加載圖片開源插件 jquery 欄目 JQuery 简体版

原文原文鏈接

　　圖片延時加載技術對大流量的網站來講是十分實用的。目前圖片在網站中大量使用，若是不加處理的話會對服務器和帶寬形成級大壓力，經過只渲染當前用戶可見區域的圖片，能夠極大地減小網站的請求數，下降網絡帶寬資源。javascript

　　unveil

　　這是一款十分輕量級的片時圖片加載組件html

　　支持現代瀏覽器及IE7+, Github上面有將近3K個star(關注)java

　　使用node

　　通常圖片jquery

<img src="bg.png" data-src="img1.jpg" />

　　對於支持 retina (視網膜屏幕) 設備git

<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

　　應用github

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