Home > Developer > JavaScript
Native javaScript implements the method of image delayed loading, and javascript delayed Loading
This example describes how to implement delayed image loading using native javaScript. In fact, the jquery plug-in is available for image delayed loading, and the loading method is very simple and reasonable. However, some friends thought that loading the jquery plug-in package was too large, and they wrote one at a time, to share with you.
First, delayed image loading can save our bandwidth and improve user experience, especially for sites with multiple images, the following describes the principle and implementation code of a piece of delayed loading.
Principle of delayed image loading
The principle of delayed image loading is that the image src in html is not the real image address, but the image address is assigned to the img label with a custom attribute, for example: src = "img/loading.gif" data-url = "img/1.jpg", and then judge the browser scroll bar event through js, when the image reaches a certain point, the real address of the image in the custom attribute is assigned to the src of the current img label to achieve dynamic display of the image. In real projects, the addresses of these images can be passed through ajax and assigned to the custom attributes of img.
Native JS implements image delayed loading instances:
The text seems boring after all. I wrote a simple demo and now I have pasted all the code. If you need it, you can copy it directly and check the code to understand it.
Copy codeThe Code is as follows: <! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> delayed image loading </title>
<Style>
Img {display: block; width: 350px; height: 245px; background: url (img/loading.gif) center no-repeat}
</Style>
</Head>
<Body>
<Div id = "div">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</Div>
<Script type = "text/javascript">
Var obj = document. getElementById ("div"). getElementsByTagName ("img "),
H = window. innerHeight | document.doc umentElement. clientHeight;
For (var I = 0; I <obj. length; I ++ ){
Obj [I]. url = obj [I]. getAttribute ("data-url ");
Obj [I]. top = obj [I]. offsetTop;
Obj [I]. flag = true; // prevents the browser from loading images all the time, so that after the image is loaded successfully, the image will not be loaded when the browser is rolled;
}
Var fnLoad = function (obj ){
Var t = document. body. scrollTop | document.doc umentElement. scrollTop;
If (t + h> obj. top + 200 & obj. top> t) {// give a 200 picture to improve the user's viewing of the image loading status, which is more friendly
SetTimeout (function (){
Obj. src = obj. url;
Obj. flag = false;
}, 500)
}
}
Window. onscroll = window. onload = function (){
For (var I = 0; I <obj. length; I ++ ){
If (obj [I]. flag ){
FnLoad (obj [I]);
}
}
}
</Script>
</Body>
</Html>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
