首頁»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條評論
登錄會員中心
大发国际网址 义马市| 遂平县| 镇雄县| 定远县| 岚皋县| 咸阳市| 鲁甸县| 兴文县| 新民市| 盐源县| 九寨沟县| 土默特左旗| 霍城县| 林芝县| 昌邑市| 乌拉特前旗| 冀州市| 香格里拉县| 衡东县| 葫芦岛市| 菏泽市| 青田县| 中江县| 南康市| 玛沁县| 望江县| 阿拉尔市| 古蔺县| 榆林市| 卢氏县| 溧水县| 盐源县| 育儿| 东至县| 罗源县| 惠安县| 象州县| 万源市| 丹阳市| 宁化县| 崇州市| 东乡族自治县| 福安市| 淮北市| 招远市| 宁城县| 惠安县| 杭锦旗| 九龙城区| 班玛县| 安徽省| 礼泉县| 明溪县| 丰顺县| 鹤壁市| 资讯| 大竹县| 开封县| 武陟县| 峨边| 新巴尔虎右旗| 马公市| 易门县| 涿鹿县| 昭通市| 阳山县| 康乐县| 垣曲县| 古田县| 万载县| 琼结县| 崇明县| 翼城县| 安塞县| 宝鸡市| 宁安市| 仁怀市| 南岸区| 浙江省| 北川| 河北省| 江川县| 鄂托克旗| 交城县| 鹿邑县| 射阳县| 卫辉市| 平阳县| 乌兰县| 博野县| 平山县| 盐边县| 贺兰县| 阳谷县| 辉县市| 高台县| 罗山县| 桐乡市| 关岭| 蒲江县| 买车| 海盐县| 安庆市| 神池县| 门源| 施甸县| 同江市| 敦化市| 蕲春县| 丽水市| 诸暨市| 浦北县| 仙居县| 云霄县| 盐山县| 岢岚县| 清水河县| 都匀市| 岑溪市| 绍兴市| 蓝田县| 读书| 云安县| 黄冈市| 雅安市| 巴林右旗| 萨嘎县| 湟中县| 鄄城县| 崇礼县| 瑞昌市| 鹿邑县| 锦屏县| 通化市| 老河口市| 桃源县| 义马市|