懒加载的原理及实现

懒加载的原理

  • 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
  • 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

代码实现

  • 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内：
  • 再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内
  • 我们已经很接近了，现在我们要做的是，让元素只在第一次被检查到时打印true，之后就不再打印了
  • <!DOCTYPE html>
<html>
<head>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js
"></script>
	<title>demo lazyload</title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			text-decoration: none;
			list-style: none;
		}
		.layout {
			margin: 0 auto;
			width: 1000px;
		}
		.lazyload img {
			width: 300px;
			height: 400px;
		}
		.img-ct {
			margin-left: -50px;
			overflow: auto;
		}
		.item {
			float: left;
			margin-left: 50px;
			margin-bottom: 30px;
		}
	</style>
</head>
<body>
<div class="lazyload">
  <div class="layout">
	<ul class="img-ct">
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
		<li class="item">
			<a href="javascript:void(0)"><img data-img="img/Tsingtao.jpeg" src="img/blank.jpg"></a>
		</li>
	</ul>
  </div>
</div>


<script type="text/javascript">
var lazyLoad = (function(){
	var clock;
	
	function init(){
		$(window).on("scroll", function(){
			if (clock) {
				clearTimeout(clock);
			}
			clock = setTimeout(function(){
				checkShow();
			}, 200);
		})
		checkShow();
	}
	
	function checkShow(){
		$(".lazyload img").each(function(){
			var $cur =$(this);
			if($cur.attr('isLoaded')){
        		return;
      		}
			if(shouldShow($cur)){
				showImg($cur);
			}
		})
	}
	function shouldShow($node){
		var scrollH = $(window).scrollTop(),
			winH = $(window).height(),
			top = $node.offset().top;
		if(top < winH + scrollH){
	  		return true;
	  	}else{
	  		return false;
	  	}
	}
	function showImg($node){
    	$node.attr('src', $node.attr('data-img'));
    	$node.attr('isLoaded', true);
	}
	return {
		init: init
	}
})()
lazyLoad.init();
</script>
</body>
</html>
posted @ 2018-04-20 23:03  落霞秋水  阅读(378)  评论(0)    收藏  举报