快捷導(dǎo)航

JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼

更新時(shí)間：2013年07月13日 14:05:02 作者：

這篇文章介紹了，JS圖片根據(jù)鼠標(biāo)滾動(dòng)延時(shí)加載的實(shí)例代碼，有需要的朋友可以參考一下

最近研究了京東商城用jQuery的實(shí)現(xiàn)如下：
就是默認(rèn)地址賦給img標(biāo)簽的src2屬性，顯示時(shí)賦給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"
});

您可能感興趣的文章:

相關(guān)文章

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