JS圖片根據鼠標滾動延時加載的實例代碼
更新時間:2013年07月13日 14:05:02 作者:
這篇文章介紹了,JS圖片根據鼠標滾動延時加載的實例代碼,有需要的朋友可以參考一下
最近研究了京東商城用jQuery的實現(xiàn)如下:
就是默認地址賦給img標簽的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"
});
就是默認地址賦給img標簽的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"
});
您可能感興趣的文章:
- 網頁圖片延時加載的js代碼
- JavaScript延時效果比較不錯的
- js實現(xiàn)網頁圖片延時加載 提升網頁打開速度
- JS延時提示框實現(xiàn)方法詳解
- 原生javaScript實現(xiàn)圖片延時加載的方法
- javascript實現(xiàn)延時顯示提示框特效代碼
- jQuery 鼠標經過(hover)事件的延時處理示例
- jQuery hover 延時器實現(xiàn)代碼
- Jquery實現(xiàn)圖片預加載與延時加載的方法
- jQuery實現(xiàn)鼠標經過事件的延時處理效果
- jQuery實現(xiàn)帶延時功能的水平多級菜單效果【附demo源碼下載】
- JS/jQuery實現(xiàn)DIV延時幾秒后消失或顯示的方法
相關文章
ZeroClipboard插件實現(xiàn)多瀏覽器復制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復制按鈕之上,這樣其實點擊的不是按鈕而是Flash ,這樣將需要的內容傳入Flash,再通過Flash的復制功能把傳入的內容復制到剪貼板2014-08-08getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法
本文是對getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法。進行了分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11兩種JavaScript的AES加密方式(可與Java相互加解密)
這篇文章主要介紹了兩種JavaScript的AES加密方式(可與Java相互加解密) 的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調函數(shù)使用等相關操作技巧,需要的朋友可以參考下2018-09-09獲取css樣式表內樣式的js函數(shù)currentStyle(IE),defaultView(FF)
JS從樣式表取值的函數(shù),IE中以currentStyle,firefox中defaultView來獲取,需要的朋友可以參考下。2011-02-02