您的位置：首页 > 其它

lazyload 初学

2016-03-22 16:57 232 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航