Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "JavaScript how to achieve page scrolling picture loading function", the content is detailed, the steps are clear, the details are handled properly, I hope that this "JavaScript how to achieve page scrolling picture loading function" article can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

Principle:

1. Bind a scrolling event to a page

two。 Put the real image address in a property when the page is loaded

3. Then determine whether the element enters the current browser window during scrolling

4. Load pictures * it's up to you to decide what to load and what kind of user experience to use.

Difficulties:

Browser compatibility is the cause of the difficulty, DOM standard and IE standard, the front-end work is dealing with them every day. Think about the following code

1.window.pageYOffset? Window.pageYOffset: window.document.documentElement.scrollTop

Objective: to obtain 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

Objective: to declare the height and width of the document display area of the window in pixels.

DOM standard: innerheight and innerwidth

IE standard: clientWidth and clientHeight attributes 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: to get the location of page elements.

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 the webkit kernel, the document. DocumentElement.scrolltop value is always 0, using document.body

I also searched for a saying that is related to DTD (that is, use document.documentElement when the page specifies DOCTYPE; use document.body when the page does not specify DOCTYPE). Please make sure that friends who know will help to point it out.

Details:

1. Because the real address is originally in a property (default is xsrc, which can be set by yourself), the default image address * is a transparent picture of one pixel, which avoids the occurrence of red X in the browser.

two。 When you load a picture, you can add the waiting picture, so that the user will know that there is a picture to load here, and a good user experience is what the front end is always pursuing (as reflected in the example).

3. After the image load is successful, you can add the appropriate display effect (this is not reflected in the example, you can try it yourself)

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

< _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 () Read here, the "JavaScript how to achieve page scrolling picture loading function" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.