JavaScript implements page scrolling image loading-JS Tutorial-php.cn

JavaScript implements page scrolling image loading

高洛峰

Release： 2016-11-25 11:43:25

Original

1139 people have browsed it

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 the jQuery method, but if the webmaster does not use jQuery, can't he use this method? What?;

　　3. Sharing technology also allows more people to help you test it, because I have never actually used it in the project, I just 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 now, when will I wait...

Most of today’s pages have the characteristics - rich content and relatively small pictures. There are many; like Taobao, JD.com, and group buying websites that we often browse (I am a big fan of online shopping, and 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 it is popular Method - scrolling 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. When loading the page, put the real image address in a certain attribute;

3. Then determine whether the element is in the scrolling process Enter the current browser window;

4. Finally load the image, of course it is up to you to decide what to load and what user experience to use;

Difficulty:

Browser compatibility is the reason for the difficulty, DOM standards and IE standards, front-end work deals with them every day. Think about 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 and width of the window's document display area, in pixels .

DOM standard: innerheight and innerwidth;

IE standard: clientWidth and clientHeight properties of document.documentElement or document.body (related to DTD) as an alternative

　3.obj.getBoundingClientRect().top + window.document. documentElement.scrollTop + window.document.body.scrollTop

use using document.documentElement.ScrollTop ‐ to get the position of the page element.

to the correct value;

use using document.body , use document.documentElement; when the page does not specify DOCTYPE, use document.body), please make sure 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 ；

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

-------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------ JavaScript implements page scrolling image loading

The JavaScript source 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

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 offsetPage && postWindow

if (tag === "img" && attrSrc !== null) {

o.setAttribute("src", attrSrc);

}

o = null;

}

};

window.onscroll = function () { .

;

scrollLoad();

demo download

can pass a parameter to set the src original address and response time