使用方法：把页面上需要延时加载的图片src改成为lazy_src，然后把上面的js放到body最后面，然后调用：lazyLoad.init();
调戏的方法可以使用firebug来查看一时图片是否是延时加载。
另外：
如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：
///切换内容的代码… chlid.find("img[init_src]").each(function(){ $(this).attr("src",$(this).attr("init_src")); $(this).removeAttr("init_src"); });
原生态js实现图片延时加载方法三：
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>通过原生js延迟加载图片</title> <style type="text/css"> div{width:100px;height:100px;background:#F00;margin-bottom:30px} </style> </head> <body> <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/001.png " src="https://www.jb51.net/article/a.gif" /></div> <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png " src="https://www.jb51.net/article/a.gif" /></div> <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png " src="https://www.jb51.net/article/a.gif" /></div> <div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png " src="https://www.jb51.net/article/a.gif" /></div> </body> //以上图片测试时可用复制多点 <script type="text/javascript"> (function(){ //common function tagName(tagName){ return document.getElementsByTagName(tagName); } function $(id){ return document.getElementById(id); } function addEvent(obj,type,func){ if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } } //这里可以按照需要配置些参数 var v={ eleGroup:null, eleTop:null, eleHeight:null, screenHeight:null, visibleHeight:null, scrollHeight:null, scrolloverHeight:null, limitHeight:null } //对数据进行初始化 function init(element){ v.eleGroup=tagName(element) screenHeight=document.documentElement.clientHeight; scrolloverHeight=document.body.scrollTop; for(var i=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('data-url')); v.eleGroup[i].removeAttribute('data-url') } } } function lazyLoad(){ if(document.body.scrollTop == 0){ limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=v.eleGroup.length;i<j;i++){ if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('data-url')){ v.eleGroup[i].src=v.eleGroup[i].getAttribute('data-url'); v.eleGroup[i].removeAttribute('data-url') } } } init('img') addEvent(window,'scroll',lazyLoad); })() </script> </html>
以上内容通过三种方法介绍了js实现图片延时加载，希望大家喜欢。
您可能感兴趣的文章: