Native javaScript to implement the image loading method
- 2020-05-07 19:13:31
- OfStack
This article illustrates the method of native javaScript to realize the delayed loading of images. The image delay loading is actually with the jquery plug-in and the loading method is very simple and reasonable. However, some friends think that the loading of jquery plug-in package is too large, so they wrote one by themselves and share one with you.
First of all, the image delay loading can save our bandwidth, to obtain a better user experience, especially for the site with more pictures, this point is crucial, the following is to discuss with you 1 image delay loading principle and implementation code.
image delay loading principle
The principle of image delay loading is that the image src in html does not fill in the actual image address, but assigns the image address to the img tag with a custom attribute, such as: src= "img/ loading.gif" data-url = In a real project, the addresses of these images can be passed through ajax and assigned to the custom properties of img.
native JS implementation of image delay loading example:
The text content looks a bit boring after all, I wrote a simple demo, now put all the code posted, the need of friends can directly copy the past, see 1 code to understand.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Image lazy loading </title>
<style>
img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}
</style>
</head>
<body>
<div id="div">
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
<img src="" alt="" data-url="img/11.jpg" class="test"><br>
</div>
<script type="text/javascript">
var obj=document.getElementById("div").getElementsByTagName("img"),
h=window.innerHeight || document.documentElement.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; // Prevent browsers 1 Load the image directly, so that when the image loads successfully, it will no longer load the image when scrolling the browser.
}
var fnLoad = function(obj){
var t = document.body.scrollTop || document.documentElement.scrollTop;
if(t+h>obj.top+200&&obj.top>t){ // Give a 200 In order to improve the user to see the image loading state, 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 has been helpful to your javascript programming.