首頁»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開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共1條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共1條評論
登錄會員中心
大发国际网址 土默特右旗| 上林县| 芦山县| 马关县| 定襄县| 琼中| 花莲市| 婺源县| 北辰区| 鄱阳县| 皋兰县| 和平县| 滁州市| 昌吉市| 鹿泉市| 南安市| 新民市| 南充市| 武乡县| 中西区| 拉萨市| 定结县| 得荣县| 绥德县| 常宁市| 柳河县| 科尔| 沂源县| 清镇市| 灵武市| 曲沃县| 稷山县| 马关县| 黄浦区| 霍城县| 黄山市| 都匀市| 福海县| 全南县| 江源县| 凤庆县| 沧源| 洛隆县| 佛冈县| 张家口市| 黄龙县| 石泉县| 上虞市| 甘孜县| 内江市| 股票| 诏安县| 阳新县| 江华| 沅陵县| 清丰县| 信丰县| 巴林右旗| 明溪县| 松江区| 龙口市| 鄂州市| 依兰县| 邢台市| 赫章县| 合作市| 裕民县| 泰顺县| 都昌县| 漠河县| 乾安县| 昔阳县| 富锦市| 日喀则市| 望城县| 马鞍山市| 兰溪市| 大关县| 驻马店市| 沙雅县| 阿克苏市| 西充县| 海伦市| 遂溪县| 微博| 苍梧县| 宜昌市| 彭泽县| 聂荣县| 新晃| 廊坊市| 邵阳县| 沙坪坝区| 淮阳县| 渝北区| 石台县| 惠水县| 保靖县| 浙江省| 曲靖市| 贺州市| 白玉县| 乌什县| 洮南市| 连南| 天门市| 阳朔县| 肇源县| 宣化县| 茶陵县| 中江县| 亳州市| 巫溪县| 松原市| 石台县| 玉林市| 南昌市| 长乐市| 五原县| 永善县| 泰和县| 柳河县| 皮山县| 赤峰市| 阳江市| 察哈| 万荣县| 抚顺市| 绥宁县| 汝阳县| 延安市| 友谊县| 盐边县| 肇东市| 同心县| 宁波市| 沂源县|