Methods for realizing image delay loading in native javascript

Author：Eve Cole Update Time：2025-05-07 17:32:01

This article describes the method of realizing image delay loading in native JavaScript. The delayed image loading actually has a jquery plug-in, and the loading method is very simple and reasonable. However, some friends think that loading the jquery plug-in package is too big, so I wrote one by myself to share it with you.

First of all, image delay loading can save us bandwidth and obtain a better user experience, especially for sites with many pictures, which is crucial. Let me discuss the principle and implementation code of image delay loading with you below.

Picture delay loading principle

The principle of image delay loading is that the image src in the html is not filled in the real image address, but the image address is assigned to the img tag with a custom attribute, such as: src=”img/loading.gif” data-url=”img/1.jpg”, and then judge the browser scrollbar event through js. When reaching a certain point, the real address of the image in the custom attribute is assigned to the src of the current img tag, thereby realizing the dynamic display of the image. In real projects, the addresses of these images can be passed through ajax and assigned to the custom properties of img.

Native JS implements image delay loading example:

The text content looks a bit boring after all. I wrote a simple demo and now post all the code. Friends who need it can copy it directly and then you will understand after looking at the code.

Copy the code as follows: <!DOCTYPE HTML>

<html>

<head>

<title>Image delay loading</title>

<style>

img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}

</style>

</head>

<body>

</div>

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 the browser from loading the picture all the time, so that after the picture is loaded successfully, the picture will not be loaded when the browser is scrolled;

}

var fnLoad = function(obj){

var t = document.body.scrollTop || document.documentElement.scrollTop;

if(t+h>obj.top+200&&obj.top>t){ //Give 200 to improve the loading status of the user, it 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 be helpful to everyone's JavaScript programming.