picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)
更新時間:2016年07月21日 09:18:30 投稿:jingxian
下面小編就為大家?guī)硪黄猵icLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
如下所示:
/**
* picLazyLoad 圖片延時加載,包含背景圖片
* $(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();
// 滾動觸發(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 實現(xiàn)圖片延時加載(包含背景圖片)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery動態(tài)切換背景圖片的簡單實現(xiàn)方法
- 改變iOS應(yīng)用中UITableView的背景顏色與背景圖片的方法
- Android自定義Button并設(shè)置不同背景圖片的方法
- javascript設(shè)置頁面背景色及背景圖片的方法
- Android編程簡單實現(xiàn)ImageView點擊時背景圖修改的方法
- 利用jQuery和CSS將背景圖片拉伸
- android中實現(xiàn)背景圖片顏色漸變方法
- js根據(jù)鼠標(biāo)移動速度背景圖片自動旋轉(zhuǎn)的方法
- js實現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法
- js實現(xiàn)背景圖自適應(yīng)窗口大小
相關(guān)文章
使用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
jquery.autocomplete修改實現(xiàn)鍵盤上下鍵自動填充示例
根據(jù)需求要實現(xiàn)通過鍵盤上下移動,獲得聯(lián)想菜單中的值,如同google baidu的查詢功能,下面的代碼是自己手寫的,喜歡的朋友可以嘗試操作下2013-11-11
Jquery通過JSON字符串創(chuàng)建JSON對象
這篇文章主要介紹了Jquery如何通過JSON字符串創(chuàng)建JSON對象,并附詳細(xì)示例,需要的朋友可以參考下2014-08-08
jQuery簡單實現(xiàn)對數(shù)組去重及排序操作實例
這篇文章主要介紹了jQuery簡單實現(xiàn)對數(shù)組去重及排序操作,結(jié)合實例形式分析了jQuery中unique方法進(jìn)行數(shù)組去重及sort方法排序的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程
這篇文章主要介紹了基于jQuery的網(wǎng)頁影音播放器jPlayer的基本使用教程,文中的示例主要針對其播放音頻文件的用法,需要的朋友可以參考下2016-03-03

