lazyload 初学

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_30542079

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiangtao1995/p/5307419.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lazyLoad</title>
<script src="//cdn.bootcss.com/jquery/2.1.0-beta2/jquery.min.js"></script>
<script src="lazyLoad.min.js"></script>
</head>
<body>
<img src="img/grey.gif" alt="" id="bmw_img" class="lazy" data-original="img/bmw_m1_hood.jpg" width="765" height="574">
<a href="javascript:;" onclick="lazyload()" style="display: block;">加载图片</a>
<script>
var imgEle = document.getElementById('bmw_img');/声明变量imgEle获得bmw_img的标签/
function lazyload(){/触发点击事件/
var original = imgEle.getAttribute('data-original');/声明变量original为imgEle获取data-original的属性/
oImg = document.createElement('img');/oImg创造一个img标签/
oImg.src=original;/oImg的地址为original/
oImg.onload = function(){/先隐藏再出现/
imgEle.src = original;
}
}
</script>
</body>
</html>