基于jquery 延迟加载（1）

最新推荐文章于 2024-07-25 11:26:35 发布

淡淡的云彩恋歌

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量816

点赞数

分类专栏：封装的库文章标签： jquery html 结构

本文链接：https://blog.csdn.net/qq_34285828/article/details/53771280

版权

封装的库专栏收录该内容

2 篇文章 0 订阅

订阅专栏

延迟加载原理：

采用的是动态的替换img的src的属性，通过xsrc路径替换为src路径来达到延迟加载图片的功能

HTML结构和CSS样式

<!DOCTYPE html>
<html>
<head>
	<title>延迟加载的delayLoad</title>
	<style type="text/css">
		.photo{
			width: 900px;
			/*background-color: gray;*/
			margin: 0 auto;
		}
		.photo dl{
			float: left;
			width:225px;
			height:270px;
			margin: 5px 0 15px 0;
		}
		.photo dt{
			width: 200px;
			height: 250px;
			background-color: #ccc
		}
		.photo dt dd{
			height: 25px;
			line-height: 25px;
		}
		.ob{
			height: 800px;
		}
		.wait_load{
			opacity: 0;
		}
	</style>
</head>
<body>
<div class="ob"></div>

<div id="photo" class="photo">
	<dl>
		<dt><img xsrc="img/p1.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p2.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p3.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p4.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p5.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p6.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p7.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p8.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p9.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p10.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p11.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
	<dl>
		<dt><img xsrc="img/p12.jpg" src="img/wait_load.jpg" class="wait_load"></dt>
		<dd>延迟加载</dd>
	</dl>
</div>

基于jquery的实现，通过attr动态的获取xsrc替换src

<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$(document).scroll(function(event) {
			/* Act on the event */
			var windowHeight = $(window).height();
			var scrollTop = $(document).scrollTop();
			var wait_load = $(".wait_load");
			//var imgScrollTop = wait_load.offset().top;
			var top = parseInt(scrollTop) + parseInt(windowHeight);
			setTimeout(function(){
				for(var i = 0;i < wait_load.length;i++){
					var _this = $(wait_load).eq(i);
					if(top >= _this.offset().top){
						_this.attr('src',_this.attr('xsrc')).animate({
							opacity:1
						},100)
					}
				}
			},600)
		});
	})
</script>

至此，简单的实现了延迟加载的效果