原生javaScript实现图片延时加载的方法
本文实例讲述了原生javaScript实现图片延时加载的方法。图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下。
首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码。
图片延时加载原理
图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:src=”img/loading.gif”data-url=”img/1.jpg”,然后通过js判断浏览器滚动条事件,达到某处的时候把自定义属性里面的图片真实地址赋给当前img标签的src,从而实现图片动态的显示。在真正的项目中,这些图片的地址可以通过ajax传递过来,赋给img的自定义属性。
原生JS实现图片延时加载实例:
文字内容看起来终究有些枯燥,我写了一个简单的demo,现在把全部代码贴出来,需要的朋友可以直接复制过去,看一下代码就明白了。
<!DOCTYPEHTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>图片延迟加载</title> <style> img{display:block;width:350px;height:245px;background:url(img/loading.gif)centercenterno-repeat} </style> </head> <body> <divid="div"> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> <imgsrc=""alt=""data-url="img/11.jpg"class="test"><br> </div> <scripttype="text/javascript"> varobj=document.getElementById("div").getElementsByTagName("img"), h=window.innerHeight||document.documentElement.clientHeight; for(vari=0;i<obj.length;i++){ obj[i].url=obj[i].getAttribute("data-url"); obj[i].top=obj[i].offsetTop; obj[i].flag=true; //防止浏览器一直加载图片,这样图片加载成功后,滚动浏览器的时候就不会再加载图片了; } varfnLoad=function(obj){ vart=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(vari=0;i<obj.length;i++){ if(obj[i].flag){ fnLoad(obj[i]); } } } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。