JS圖片根據(jù)鼠標(biāo)滾動延時加載的實例代碼
更新時間:2013年07月13日 14:05:02 作者:
這篇文章介紹了,JS圖片根據(jù)鼠標(biāo)滾動延時加載的實例代碼,有需要的朋友可以參考一下
最近研究了京東商城用jQuery的實現(xiàn)如下:
就是默認(rèn)地址賦給img標(biāo)簽的src2屬性,顯示時賦給src屬性值。
function lazyload(option) {
var settings = {
defObj: null,
defHeight: 0
};
settings = $.extend(settings, option || {});
var defHeight = settings.defHeight;
var defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
var pageTop = function() {
return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight;
};
var imgLoad = function() {
defObj.each(function() {
if ($(this).offset().top <= pageTop()) {
var src2 = $(this).attr("src2");
//已顯示的不用再顯示
if (src2) {
//顯示后,去掉src2屬性
$(this).attr("src", src2).removeAttr("src2");
}
}
});
};
imgLoad();
$(window).bind("scroll", function() {
imgLoad();
});
}
lazyload({
defObj:".w1"
});
就是默認(rèn)地址賦給img標(biāo)簽的src2屬性,顯示時賦給src屬性值。
復(fù)制代碼 代碼如下:
function lazyload(option) {
var settings = {
defObj: null,
defHeight: 0
};
settings = $.extend(settings, option || {});
var defHeight = settings.defHeight;
var defObj = (typeof settings.defObj == "object") ? settings.defObj.find("img") : $(settings.defObj).find("img");
var pageTop = function() {
return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - settings.defHeight;
};
var imgLoad = function() {
defObj.each(function() {
if ($(this).offset().top <= pageTop()) {
var src2 = $(this).attr("src2");
//已顯示的不用再顯示
if (src2) {
//顯示后,去掉src2屬性
$(this).attr("src", src2).removeAttr("src2");
}
}
});
};
imgLoad();
$(window).bind("scroll", function() {
imgLoad();
});
}
lazyload({
defObj:".w1"
});
您可能感興趣的文章:
- 網(wǎng)頁圖片延時加載的js代碼
- JavaScript延時效果比較不錯的
- js實現(xiàn)網(wǎng)頁圖片延時加載 提升網(wǎng)頁打開速度
- JS延時提示框?qū)崿F(xiàn)方法詳解
- 原生javaScript實現(xiàn)圖片延時加載的方法
- javascript實現(xiàn)延時顯示提示框特效代碼
- jQuery 鼠標(biāo)經(jīng)過(hover)事件的延時處理示例
- jQuery hover 延時器實現(xiàn)代碼
- Jquery實現(xiàn)圖片預(yù)加載與延時加載的方法
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果
- jQuery實現(xiàn)帶延時功能的水平多級菜單效果【附demo源碼下載】
- JS/jQuery實現(xiàn)DIV延時幾秒后消失或顯示的方法
相關(guān)文章
ZeroClipboard插件實現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上,這樣其實點擊的不是按鈕而是Flash ,這樣將需要的內(nèi)容傳入Flash,再通過Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-08-08getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法
本文是對getAsDataURL在Firefox7.0下無法預(yù)覽本地圖片的解決方法。進(jìn)行了分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11兩種JavaScript的AES加密方式(可與Java相互加解密)
這篇文章主要介紹了兩種JavaScript的AES加密方式(可與Java相互加解密) 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09獲取css樣式表內(nèi)樣式的js函數(shù)currentStyle(IE),defaultView(FF)
JS從樣式表取值的函數(shù),IE中以currentStyle,firefox中defaultView來獲取,需要的朋友可以參考下。2011-02-02javascript 學(xué)習(xí)筆記(onchange等)
javascript 學(xué)習(xí)筆記,一些簡單的小技巧,學(xué)習(xí)js的朋友可以看下。2010-11-11