jquery框架下图片的延迟加载技术(存在BUG)

最新推荐文章于 2022-08-21 17:46:10 发布

xie3400656

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量2.3k

点赞数 1

分类专栏： js jquery 文章标签： jquery 框架 2010 function server 浏览器

本文链接：https://blog.csdn.net/xie3400656/article/details/6929320

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>开发实例</title>

<script src="/js/jquery-1.2.6.pack.js" type="text/javascript"></script>

<style type="text/css">
img
{
height: auto;
min-height: 200px;
height: auto;
min-width: 200px;
margin-top: 50px;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
//初次加载执行
DelayLoadImg();
//监听滚动条触发事件
$(window).scroll(function() {
DelayLoadImg();
});
});
function DelayLoadImg() {
//浏览器工作区域高度
var webHeight = window.screen.availHeight - window.screenTop;
//初始化待加载图片集合
var LoadImgArray = document.getElementsByName("load");
//获取被卷曲网页的高度
var nHeight = document.body.scrollTop;
if (nHeight == 0)
nHeight = document.documentElement.scrollTop;
for (var i = 0; i < LoadImgArray.length; i++) {
var mg = LoadImgArray[i];
//当IMG元索绝对
if ((nHeight + webHeight) >= $(mg).offset().top && mg.src.indexOf("load:") > -1) {
mg.src = mg.src.replace("load:", "");
var jqMg = $(mg);
jqMg.fadeOut(function() {
jqMg.fadeIn("slow");
});
}
}
}
</script>

</head>
<body>
<form id="form1" runat="server">

<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
<img alt="" name="load" src="load:http://pic.people.com.cn/mediafile/201003/29/F201003291103371233923130.jpg" /><br />
</form>
</body>
</html>