原生javaScript实现图片延时加载的方法

本文实例讲述了原生javaScript实现图片延时加载的方法。图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了，但有朋友觉得加载jquery插件包太大了，于时自己写了一个，给各位分享一下。

首先，图片延时加载可以节省我们带宽，获取到更好的用户体验，尤其对于图片多的站点，这一点显得至关重要，下面就跟大家探讨一下图片延时加载原理和实现代码。

图片延时加载原理

图片延时加载原理是在html里面的图片src填的并不是真正的图片地址，而是以一种自定义属性把图片地址赋给img标签，如：src=”img/loading.gif” data-url=”img/1.jpg”，然后通过js判断浏览器滚动条事件，达到某处的时候把自定义属性里面的图片真实地址赋给当前img标签的src，从而实现图片动态的显示。在真正的项目中，这些图片的地址可以通过ajax传递过来，赋给img的自定义属性。

原生JS实现图片延时加载实例：

文字内容看起来终究有些枯燥，我写了一个简单的demo，现在把全部代码贴出来，需要的朋友可以直接复制过去，看一下代码就明白了。

复制代码代码如下:

	<!DOCTYPE HTML>

	<html>

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>图片延迟加载</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;  //防止浏览器一直加载图片，这样图片加载成功后，滚动浏览器的时候就不会再加载图片了；

	}

	var fnLoad = function(obj){

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

	    if(t+h>obj.top+200&&obj.top>t){ //给个200为了提高让用户看到图片加载状态，更加友好

	       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>

希望本文所述对大家的javascript程序设计有所帮助。

原生javaScript实现图片延时加载的方法

相关文章

热门资讯