Home > Web Front-end > JS Tutorial > 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
Release: 2016-05-16 17:28:55
Original
875 people have browsed it

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"
});

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template