js image lazy loading
Created by Marydon on 2018-04-14 08:15
1. Usage scenarios
When a large number of images need to be loaded on the web page, if all the images are loaded at one time, the loading time of the web page will be too long;
The web page itself has been very slow. If you need to quote pictures on your page, it will be even worse.
2. Image lazy loading principle
The lazy loading of images is just a big name. The implementation is very simple, that is, you can assign values to the src attribute of the image when you need it. That's all.
3. Code implementation
/**
*Lazy loading of pictures
*/
function ImgLazyLoad() {
/**
*Scroll to the location of the picture and load again
* @param imgId
*ID of lazy loading image
* @param imgSrc
*Address of lazy loading image
* @param distance
*The visual distance of the image (this parameter can not be transmitted)
*/
this.scrollLoad = function(imgId,imgSrc,distance) {
//Get the src of the image
var img_source = $('#' + imgId).attr('src');
//Only once
if("" == img_source) {
//The visible height of the page without scrolling
var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
//Gets the distance of the image from the top of the page
var imgOffsetTop = $('#' + imgId)[0].offsetTop;
//Gets the visible height of a web page
// var bodyClientHeight = document.body.clientHeight;
<span style="color: #008000;">//< / span > < span style = "color: ﹤ 008000;" > 1. If the page height & lt; is less than the height of the page's visible area (imgoffsettop & lt; documentclientheight), there will be no scrolling event</span>
<span style="color: #0000ff;">if</span> (imgOffsetTop <<span style="color: #000000;"> documentClientHeight) {
$(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc;
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
}
</span><span style="color: #008000;">//< span > get screen height</span>
<span style="color: #008000;">//</span><span style="color: #008000;">var screenHeight = window.screen.height;</span>
<span style="color: #008000;">//< / span > < span style = "color:" 008000; "> the vertical offset distance of the picture from the top left corner of the page (distance from the top of the page)</span>
<span style="color: #0000ff;">var</span> max_imgClientTop = $('#' + imgId)[0<span style="color: #000000;">].getBoundingClientRect().top;
</span><span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > IE has decimal points, so only integers are taken</span>
max_imgClientTop =<span style="color: #000000;"> parseInt(max_imgClientTop);
</span><span style="color: #008000;">//< / span > < span style = "color: ᦇ 008000;" > picture visual distance (how much more can be seen)</span>
<span style="color: #0000ff;">var</span> max_imgClientDistance = max_imgClientTop -<span style="color: #000000;"> documentClientHeight;
</span><span style="color: #008000;">//</span><span style="color: #008000;">0<= distance <=max_imgClientDistance</span>
<span style="color: #008000;">//When the parameter does not exist, set the value = 0; (when the picture just appears from the bottom of the visual area, the distance reaches the minimum) distance → → min = 0</span>
<span style="color: #008000;">//< span > < span style = "color: ﹤ 008000;" > 2. Parameter & gt; when the page visible height is set to = the height of the visible area; (when not scrolling, the distance reaches the maximum) distance → → max = max_ imgClientDistance,scrollTop=0</span>
distance = ((distance || 0)>max_imgClientDistance)?<span style="color: #000000;">max_imgClientDistance:distance;
</span><span style="color: #008000;">//< / span > < span style = "color: ᦇ 008000;" > 2. No scrolling at maximum distance</span>
<span style="color: #0000ff;">if</span> (distance ==<span style="color: #000000;"> max_imgClientDistance) {
$(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc;
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">;
}
</span><span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > page binding scrolling events</span>
$(document).scroll(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > get the height of the web page being rolled</span>
<span style="color: #008000;">//</span><span style="color: #008000;"> var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;</span>
<span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > distance from the top of the page</span>
<span style="color: #0000ff;">var</span> imgClientTop = $('#' + imgId)[0<span style="color: #000000;">].getBoundingClientRect().top;
</span><span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > the visual height of the picture</span>
<span style="color: #0000ff;">var</span> clientHeight = documentClientHeight -<span style="color: #000000;"> imgClientTop;
</span><span style="color: #008000;">//< / span > < span style = "color: ᦇ 008000;" > reaches the specified distance difference or the picture has entered the field of view</span>
<span style="color: #0000ff;">if</span> (-clientHeight <= distance || documentClientHeight >=<span style="color: #000000;"> imgClientTop) {
$(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc;
}
});
}
};
</span><span style="color: #008000;">/*</span><span style="color: #008000;">*
* Load by clicking on another element
* @param clickId
* The ID of the page element bound to the click event
* @param imgId
*
* @param imgSrc
* Address of lazy loading image
</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">//</span>
<span style="color: #0000ff;">this</span>.clickLoad = <span style="color: #0000ff;">function</span><span style="color: #000000;">(clickId,imgId,imgSrc) {
</span><span style="color: #008000;">//< / span > < span style = "color: # 008000;" > gets the SRC of this image</span>
<span style="color: #0000ff;">var</span> img_source = $('#' + imgId).attr('src'<span style="color: #000000;">);
</span><span style="color: #008000;">//< / span > < span style = "color: # 008000;" > is executed only once</span>
<span style="color: #0000ff;">if</span>("" ==<span style="color: #000000;"> img_source) {
</span><span style="color: #008000;">//< / span > < span style = "color: ා 008000;" > bind click event</span>
$('#' + clickId).click(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
$(</span>'#' + imgId)[0].src =<span style="color: #000000;"> imgSrc;
});
}
};
};
Call:
$(function() {
//Instantiation object
var ill = new ImgLazyLoad();
//Call
ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});
4. Knowledge points involved
There are many ways to implement it on the Internet, but you can't customize the timing of loading images. In order to achieve this, it took a lot of effort to do a good job.
The code is very short, but it involves a lot of knowledge.
//Gets the height of the visible area of the web page (without scrolling)
document.documentElement.clientHeight || window.innerHeight
//Gets the visible height of the web page (excluding the height of hidden elements)
document.body.clientHeight
//What you get is the height of the display
window.screen.height
//Get the rolled height of a web page (the former method is not supported under ie)
document.body.scrollTop || document.documentElement.scrollTop
//Gets the distance of the specified element from the top of the web page (static dead value)
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top
For an explanation of the last one, see the recommended article below