JS中关于图片的懒加载方式
2017-04-25 本文已影响1060人
神采飞扬_2015
采用JavaScript
- 获取到所有的img标签，然后遍历获取到原有的src内容，置换为占位图，在onload事件中替换上述保存的src内容
var images=document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){
var oldSrc = images[i].src; // 图片的src
images[i].src = "CommonHTML/LazyLoad/ImgLoading.gif"; // 图片默认加载的内容
images[i].onload = function () { // 加载时，用src替换默认图片
this.src = oldSrc;
}
}
- 使用onload、闭包-
<body>
<img id=\"lazy\" src=\"ForumDetailHtmlTemplate/ImgLoading.gif\" width=\"640\" heigh=\"480\" />
</body>
<script type="text/javascript">
function loadImg(url,callback){
var oImg = new Image(); // 创建一个Image对象,实现图片的预加载
oImg.width = 100;
oImg.height = 100;
oImg.onload = function(){
// 图片下载完毕时异步调用callback函数
callback(oImg);
oImg.onload = null; // 防止gif图返回进行回调
};
oImg.src = url; // 先进行onload的绑定,再赋值给src
}
loadImg('http://img4.imgtn.bdimg.com/it/u=1350614941,725003865&fm=23&gp=0.jpg?1=59',function(oim){
document.getElementById('lazy').src = oim.src;
// console.log(oim.src);
});
采用第三方
- 使用layload.min.js图片懒加载 https://github.com/jieyou/lazyload
==注意== 是使用之前需要导入lazyload.min.js文件，而且jquery.js需要在之前导入、如下
<script type="text/javascript" src="CommonHTML/JavaScript/jquery.min.js"></script>
<script type="text/javascript" src="CommonHTML/JavaScript/jquery.lazyload.min.js"></script>
使用过程
<script type="text/javascript">
$(function() {
$('img').each(function () {
var orgi = $(this).attr('src');
$(this).attr("src","CommonHTML/LazyLoad/ImgLoading.gif");
$(this).attr('data-original',orgi);
$(this).lazyload({
effect : "fadeIn",
event : ""
});
});
});
data-original 为目标url ，原有的src图像为占位符。
==注意== 图像的标签中需要加入data-original才可以生效。如果动态加入，如上述代码会发生莫名其妙的问题，有些图片会出来，有些不会。
