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)文章
下面小編就為大家?guī)硪黄猨s 兩個日期比較相差多少天的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學(xué)習(xí)設(shè)計模式的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)圖片跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片無縫循環(huán)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了javascript簡單實現(xiàn)滑動菜單效果的方法,實例分析了javascript通過對頁面元素與相關(guān)屬性的操作實現(xiàn)滑動菜單效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
mvc 、bootstrap 結(jié)合分布式圖簡單實現(xiàn)分頁
這篇文章主要介紹了mvc 、bootstrap 結(jié)合分布式圖簡單實現(xiàn)分頁的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
javascript修改瀏覽器title方法 JS動態(tài)修改瀏覽器標(biāo)題
給大家講一個用javascript修改瀏覽器title方法和技巧，需要的朋友把代碼測試吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)隨機點名效果,文中的示例代碼簡潔易懂,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11