Example of the jquery visual area loading

Last Update:2017-01-13 Source: Internet

Author: User

Tags bind

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavaScript lazy loading visual area loading

In the production of JS visual areas before loading, we must first understand the various heights, my previous article JavaScript's height summary

The various heights of jquery

First, say $ (document) and $ (window), as follows:

$ (document). Height ()//high of the entire page
$ (window). height ();//Browser Visual window Heights
$ (window). scrolltop ();//The height of the top of the browser's visual window from the top of the page (vertical offset)

A word to understand is: when the Web scroll bar to the lowest end,

$ (document). Height () = = $ (window). Height () + $ (window). scrolltop ().
Note that it is pulled to the lowest end!

$ (document) when the page is not high enough for the browser window. Height () returns $ (window). Height ()

If you want to get the height of the entire page, it is not recommended to use $ ("html"). Height (), $ ("body")

Reason:

$ ("body"). Height (): The body may have a border, the height of which will be higher than $ (document). Height () Small, $ ("html"). Height (): The height of the different browsers to get the meaning of the difference will be, in other ways, the browser is incompatible.

Here, referring to borders and margin and padding, we naturally think of the other two heights of jquery, namely Innerheight () and Outerheight ()

Innerheight () and outerheight () are not available for window and document objects, and you can use. Height () instead for window and document objects. Innerheight () and outerheight () are used primarily to get the height of the label.

Innerheight ()

Enter image description here

Innerheight: Height + filler

Outerheight: Height + filler + border, when parameter is true: Height + filler + border + margin
Innerheight (value)

This "value" argument can be a string (number plus unit) or a number, and jquery automatically adds pixel units (px) If the "value" parameter only provides a number. If you supply only one string, any valid CSS dimensions can be assigned a height (like 100px, 50%, or Auto). Note that in modern browsers, CSS height attributes do not contain padding, border, or margin unless the BOX-SIZINGCSS attribute is applied.

The various heights of JavaScript

Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available Workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth

After understanding the various heights, let's start our JS code!

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>haorooms Front-End Blog-javascript</title> of visual area loading
<style>
img{width:100%;margin-bottom:30px; min-height:400px; Background-color: #ddd;}

</style>
<body>

<script>
var imgnum=document.getelementsbytagname (' img '). length;
var imgobj=document.getelementsbytagname ("img");
var l=0;

Window.onscroll=function () {
var seeheight = document.documentElement.clientHeight;
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
for (Var i=l;iif (Imgobj[i].offsettop < Seeheight + scrolltop) {
Console.log (Imgobj[i].getattribute ("src"));
Console.log (IMGOBJ[I].SRC);
if (Imgobj[i].getattribute ("src") = = "") {
IMGOBJ[I].SRC = Imgobj[i].getattribute ("Haoroomslazyload");
}
}
if (Imgobj[i].offsettop > seeheight + scrolltop) {
L=i;
Break
}
}
}

</script>
Look at my two console output, Console.log (IMGOBJ[I].SRC), get the entire browser address!

jquery lazy Loading visual area loading

The above JS with jquery translation version!

var l=0
JS Method Translation Version
$ (window). Bind ("scroll", function (event) {

For (Var i=l;i<$ ("img"). length;i++) {
if ($ ("img"). EQ (i)-offset (). Top < parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ())) {
if ($ ("img"). EQ (i). attr ("src") = = "") {
var lazyloadsrc=$ (' img '). EQ (i). attr ("Haoroomslazyload");
$ ("img"). EQ (i). attr ("src", lazyloadsrc);
}
}
if ($ ("img"). EQ (i)-offset (). Top > parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ())) {
L=i;
Break
}
}

});

Another way,

That's how it's written.

I carried it out as follows:

$ (window). Bind ("scroll", function (event) {
$ ("img"). each (function () {
Height of the window + invisible top height = height at top of screen lower part
var thisbuttomtop = parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ());
var thistop = parseint ($ (window). scrolltop ()); Height at top of screen
var picturetop = parseint ($ (this). Offset (). top);
if (picturetop >= thistop && picturetop <= thisbuttomtop && $ (this). attr ("Haoroomslazyload")!= $ (t His). attr ("src")) {
$ (this). attr ("src", $ (this). attr ("Haoroomslazyload"));
}
});

})

Visual area Load Extension

For example, an animation effect, or a canvas image, I want to achieve the effect is that the initial come in do not load, when scrolling to the animation or the graph above, to load, then we can according to the above code to do the following improvements:

$ (window). Bind ("scroll", function (event) {

         //height of window + invisible top height = screen low distance top height
             var thisbuttomtop = parseint ($ (window). Height ()) + parseint ($ (window). scrolltop ());
            var thistop = parseint ($ (window). scrolltop ()); Top of screen height
               var picturetop = parseint ("Your ID to scroll to load"). Offset (). top);
                  if (picturetop >= thistop && picturetop <= Thisbuttomtop) {
                  // $ ("#你的要滚动加载的ID"). attr ("src", $ ("#你的要滚动加载的ID"). attr ("Haoroomslazyload");

Here you can execute your load function, the load function from the original Document.ready, move here!

}
})

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More