Home  >  Article  >  Web Front-end  >  Example code for delayed loading of JS images based on mouse scrolling_javascript skills

Example code for delayed loading of JS images based on mouse scrolling_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:28:55826browse

Recently, I studied the implementation of JD.com using jQuery as follows:
is the default address assigned to the src2 attribute of the img tag, and the src attribute value is assigned to it when displayed.

Copy code The code is as follows:

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");
//What has been displayed does not need to be displayed again
if (src2) {
                                                                                                     ;
}
           }
});
     };
        imgLoad(); );
});
}
lazyload({
defObj:".w1"
});

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn