picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)
更新時(shí)間:2016年07月21日 09:18:30 投稿:jingxian
下面小編就為大家?guī)硪黄猵icLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
如下所示:
/** * picLazyLoad 圖片延時(shí)加載,包含背景圖片 * $(img).picLazyLoad({...}) * data-original 預(yù)加載圖片地址 * alon */ ;(function($){ $.fn.imgLazyLoad = function(settings){ var $this = $(this), _winScrollTop = 0, _winHeight = $(window).height(); settings = $.extend({ threshold: 0, // 提前高度加載 placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC', callback:function(){} }, settings||{}); // 執(zhí)行懶加載圖片 lazyLoadPic(); // 滾動(dòng)觸發(fā)換圖 $(window).on('scroll',function(){ _winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; lazyLoadPic(); }); // 懶加載圖片 function lazyLoadPic(){ $this.each(function(){ var $self = $(this); if($self.is('img')){ if($self.attr('data-original')){ var _offsetTop = $self.offset().top; if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){ $self.attr('src',$self.attr('data-original')); $self.removeAttr('data-original'); $self.removeClass('loadH'); settings.callback($self); } } }else{ if($self.attr('data-original')){// 默認(rèn)占位圖片 if($self.css('background-image') == 'none'){ $self.css('background-image','url('+settings.placeholder+')'); } var _offsetTop = $self.offset().top; if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){ $self.css('background-image','url('+$self.attr('data-original')+')'); $self.removeAttr('data-original'); settings.callback($self); } } } }); } } })(Zepto);
調(diào)用
$('img').imgLazyLoad({callback:function(data){ })
以上這篇picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery動(dòng)態(tài)切換背景圖片的簡單實(shí)現(xiàn)方法
- 改變iOS應(yīng)用中UITableView的背景顏色與背景圖片的方法
- Android自定義Button并設(shè)置不同背景圖片的方法
- javascript設(shè)置頁面背景色及背景圖片的方法
- Android編程簡單實(shí)現(xiàn)ImageView點(diǎn)擊時(shí)背景圖修改的方法
- 利用jQuery和CSS將背景圖片拉伸
- android中實(shí)現(xiàn)背景圖片顏色漸變方法
- js根據(jù)鼠標(biāo)移動(dòng)速度背景圖片自動(dòng)旋轉(zhuǎn)的方法
- js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法
- js實(shí)現(xiàn)背景圖自適應(yīng)窗口大小
相關(guān)文章
jQuery插件實(shí)現(xiàn)手風(fēng)琴二級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)手風(fēng)琴二級(jí)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果
js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果,需要的朋友可以參考下2012-10-10jQuery實(shí)現(xiàn)form表單reset按鈕重置清空表單功能
有時(shí)候可能需要實(shí)現(xiàn)這樣的效果:使用ajax提交表單,成功提交表單之后清空表單,這種功能大家可能都希望實(shí)現(xiàn)吧,接下來為您詳細(xì)介紹,需要了解的朋友參考下2012-12-12jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01