标签：
当打开页面，在页面上有很多图片需要加载的情况下，为了不拖网页性能，我们完全可以使用JS延迟加载这些图片，甚至做到按需加载，这里说一下实现思路，可以事先在img标签上，增加一个属性data-url，如<img data-url="真实图片地址" src="默认图片地址" />，通过js获取首屏的高度，这部分img默认优先加载，后续通过滚动条的滚动区域来获取即将加载的img标签，找到这些img标签后，把src属性值替换为data-url的值，巧妙的做到img标签延迟加载图片。以下提供一个demo,你也可以把它封装成小插件，直接引用到你的项目中，来体验一下，是不是很炫呢，不依赖任何的其他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="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/002.png
" src="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/003.png
" src="a.gif" /></div>
<div><img data-url="http://www.pokemon.name/w/image/Sprites/PDW/004.png
" src="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>
标签：
原文地址：http://www.cnblogs.com/allen-tech/p/4762676.html
