JavaScript implements page scrolling image loading (imitation lazyload effect)_javascript skills

Why write this article?
1. It is a very practical method to optimize the page, and the technical implementation is not difficult;
2. After searching for articles with related content, it seems that they all use jQuery, but if the webmaster does not use jQuery, can't he use this method? Do you have a method?
3. Sharing technology is also to let more people help you test it, because I have not actually used it in the project, I have figured it out by myself. If there are any questions, please point them out. Thank you in advance.
4. I haven’t written this month’s blog yet;
5. I just don’t have any work tasks. If I don’t write it now, when will I wait...

Most of the current pages have this Features - rich content and many pictures; like Taobao, JD.com, group buying websites that we often browse (I am a big fan of online shopping, I feel unhappy if I don’t spend some money online for a month), a page with dozens of pictures is called drizzle , so now a popular method is rolling dynamic loading. This method can solve a large extent of HTTP requests. First, the page only loads the pictures in the window display area. It only waits until the page scrolls and scrolls to the corresponding position before loading the pictures. In this way, the web page loads faster (fewer requests, loading If there are too few things, why don’t you mention it?) In the first chapter of "High-Performance Website Construction Guide", we mentioned the importance of reducing HTTP requests. This is a very practical way to improve the front-end performance of web pages and optimize page loading speed.

Principle:
1. Bind scroll events to the page;
2. Put the real image address in a certain attribute when loading the page;
3. Then during the scrolling process Determine whether the element enters the current browser window;
4. Finally load the image. Of course, it is up to you to decide what to load and what kind of user experience to use;

Difficulty:
Browser compatibility is The reason for the difficulty lies in DOM standards and IE standards. Front-end work deals with them every day. Consider the following pieces of code
1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
Purpose: Get the Y position of the current page relative to the upper left corner of the window display area.
DOM standard :window.pageYOffset;
IE standard: window.document.documentElement.scrollTop
　2.window.innerHeight? window.innerHeight: document.documentElement.clientHeight
Purpose: Declares the height of the document display area of ​​the window and width, in pixels.
DOM standard: innerheight and innerwidth;
IE standard: clientWidth and clientHeight properties of document.documentElement or ducument.body (related to DTD) as an alternative
　3.obj.getBoundingClientRect ().top window.document.documentElement.scrollTop window.document.body.scrollTop
Purpose: Get the position of the page element.
When the browser is a non-webkit kernel, the document.body.scrollTop value is always 0 , use document.documentElement.scrollTop to get the correct value;
When the browser is webkit core, the document.documentElement.scrollTop value is always 0, use document.body;
I also searched for a statement that is It is related to DTD (that is, when the page specifies DOCTYPE, use document.documentElement; when the page does not specify DOCTYPE, use document.body), please be sure that friends who know can help point it out, thank you very much.
Details:
1. Because the real address is initially in a certain attribute (the default is xsrc, you can set it yourself), so the default image address is best a one-pixel transparent image, so as to avoid errors in the browser A red (reflected in the example);
3. After the image is loaded successfully, you can add appropriate display effects (it is not reflected in the example, you can try it yourself); The JavaScript source code is as follows:

Copy code The code is as follows:

var scrollLoad = (function (options) {
var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};
var camelize = function (s) {
return s.replace(/-(w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
};
this.getStyle = function (element, property) {
if (arguments.length != 2) return false;
var value = element.style[camelize(property)];
if (!value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(property) : null;
} else if (element.currentStyle) {
value = element.currentStyle[camelize(property)];
}
}
return value == 'auto' ? '' : value;
};
var _init = function () {
var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,
offsetWindow = offsetPage Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),
docImg = document.images,
_len = docImg.length;
if (!_len) return false;
for (var i = 0; i < _len; i ) {
var attrSrc = docImg[i].getAttribute(defaults.src),
o = docImg[i], tag = o.nodeName.toLowerCase();
if (o) {
postPage = o.getBoundingClientRect().top window.document.documentElement.scrollTop window.document.body.scrollTop; postWindow = postPage Number(this.getStyle(o, 'height').replace('px', ''));
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
if (tag === "img" && attrSrc !== null) {
o.setAttribute("src", attrSrc);
}
o = null;
}
}
};
window.onscroll = function () {
setTimeout(function () {
_init();
}, defaults.time);
}
};
return _init();
});
scrollLoad();

 
可传递一个参数设置src原地址和响应时间

复制代码 代码如下:

scrollLoad({
src:'userSrc'， //字符串型
time: 100 //数字型
})

 
demo下载