JS圖片懶加載

簡介

當頁面圖片太多時,加載速度就會很慢。尤爲是用2G/3G/4G訪問頁面,不只頁面慢,並且還會用掉不少流量。圖片懶加載的原理就是將頁面內全部須要加載的圖片所有換成一張默認的圖片(通常尺寸很小),只有圖片在可視區域纔去請求加載。javascript

實現原理

<img class="lazy" src="loading.png" data-src="img/example.jpg">

頁面打開時首先會加載src裏的圖片,即很小的加載圖;經過監聽scroll事件,當圖片在可視區域時,使用data-src替換src,加載真正的圖片。php

使用

實際使用時通常使用已經存在的插件,如lazyload插件。html

lazyload插件網上能搜出不少,常見的是:
一、jquery.lazyload.js: 依賴jQueryjava

/*! * Lazy Load - jQuery plugin for lazy loading images * * Copyright (c) 2007-2015 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/lazyload * * Version: 1.9.7 * */

http://www.appelsiini.net/projects/lazyloadjquery

二、lazyload.js: 依賴jQuery或者Zeptogit

/*!
 * An jQuery | zepto plugin for lazy loading images. * author -> jieyou * see https://github.com/jieyou/lazyload * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD) * use component's throttle https://github.com/component/throttle (MIT) */

下載:https://github.com/52fhy/lazyloadgithub

以上兩者用法是同樣的,第二個基於第一個修改,以支持zepto。如今以第二個示例:django

lazyload.js

一、引入數組

<script src="jQuery.js"></script> <script src="lazyload.min.js"></script>

二、使用app

<!--lazyload.js默認懶加載原圖片屬性是data-original--> <img class="lazy" src="loading.png" data-original="img/example.jpg">
$(".lazy").lazyload();

三、配置
缺省:

defaultOptions = {
    threshold : 0, //圖像提早多少加載,單位px failure_limit : 0, event : 'scroll', //觸發事件 effect : 'show', //效果 effect_params : null, //effect的參數數組 container : w, //使用容器,默認是window data_attribute : 'original', //能夠改爲src,即對應data-src屬性 data_srcset_attribute : 'original-srcset', skip_invisible : true, appear : emptyFn, load : emptyFn, vertical_only : false, //豎直方向滾動的頁面中使用 check_appear_throttle_time : 300, url_rewriter_fn : emptyFn, no_fake_img_loader : false, placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', // for IE6\7 that does not support data image placeholder_real_img : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png' // todo : 將某些屬性用global來配置,而不是每次在$(selector).lazyload({})內配置 }

示例:

$(function() { $(".lazy").lazyload({ effect : "fadeIn",//效果 data_attribute : 'src',//能夠改爲src,即對應data-src屬性 event: 'scroll',//默認值 container: $(".content"), //通常無需指定,即window。sui框架裏必須指定 }); });

參考:
一、jQuery延遲加載(懶加載)插件
http://www.w3cways.com/1765.html
二、Zepto picLazyLoad Plugin,圖片懶加載的Zepto插件、
http://ons.me/484.html
三、手機網站實現圖片惰性加載 | UC優視用戶研究與體驗設計中心-R.E.D
http://red.uc.cn/?p=1052
四、jQuery.lazyload詳解
http://www.cnblogs.com/wenbo/archive/2011/07/15/2107579.html
五、jieyou/lazyload: 一個jQuery或zepto的圖片延遲加載插件
https://github.com/jieyou/lazyload
六、javascript圖片懶加載與預加載的分析 - HackerVirus - 博客園
http://www.cnblogs.com/Leo_wl/p/3526254.html

 

 

 

我的公衆號謝謝各位老鐵支持

本人qq羣也有許多的技術文檔,但願能夠爲你提供一些幫助(非技術的勿加)。

 

QQ羣:   281442983 (點擊連接加入羣:http://jq.qq.com/?_wv=1027&k=29LoD19

 

個人淘寶店,能夠進去逛逛噢:https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop

相關文章
相關標籤/搜索