Heim  >  Artikel  >  Web-Frontend  >  JS图片根据鼠标滚动延时加载的实例代码_javascript技巧

JS图片根据鼠标滚动延时加载的实例代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:28:55863Durchsuche

最近研究了京东商城用jQuery的实现如下:
就是默认地址赋给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         var src2 = $(this).attr("src2");
//已显示的不用再显示
if (src2) {
                    //显示后,去掉src2属性
    $(this).attr("src", src2).removeAttr("src2");
}
            }
});
    };
    imgLoad();
    $(window).bind("scroll", function() {
        imgLoad();
    });
}
lazyload({
    defObj:".w1"
});
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn