什么是懒加载
目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。
适用场景
懒加载也加延迟加载，延迟加载网络资源或符合某些条件时才加载资源。常见的就是图片延时加载。
网站上图片量比较大，考虑用户性能，懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
懒加载的原理
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的自定义属性“data-src”（这个名字起个自己认识好记的就行）里，要用的时候就取出来，把它的值赋值给img的src属性。
jq获取各种高度
整个网页的高度：$(document).height();
浏览器可视窗口的高度：$(window).height();
浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）：$(window).scrollTop();
console.log("浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）:"+$(window).scrollTop());
console.log("浏览器当前窗口可视区域高度:"+$(window).height());
console.log("浏览器当前窗口文档的高度:"+$(document).height());
console.log("浏览器当前窗口文档body的高度:"+$(document.body).height());
console.log("浏览器当前窗口文档body的总高度 包括border padding margin:"+$(document.body).outerHeight(true));
console.log("浏览器当前窗口可视区域宽度:"+$(window).width());
console.log("浏览器当前窗口文档对象宽度:"+$(document).width());
console.log("浏览器当前窗口文档body的宽度:"+$(document.body).width());
console.log("浏览器当前窗口文档body的总宽度 包括border padding margin:"+$(document.body).outerWidth(true));
使用jQuery实现懒加载
原生jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li {
list-style: none;
}
.container {
width: 600px;
margin: 0 auto;
}
.container li {
float: left;
margin: 10px 10px;
}
.container li img {
width: 240px;
}
</style>
</head>
<body>
<ul class="container clearfix">
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/1.png" alt=""></li>
<li><img src="images/9.png" data_img="images/2.png" alt=""></li>
<li><img src="images/9.png" data_img="images/3.png" alt=""></li>
<li><img src="images/9.png" data_img="images/4.png" alt=""></li>
<li><img src="images/9.png" data_img="images/5.png" alt=""></li>
<li><img src="images/9.png" data_img="images/6.png" alt=""></li>
</ul>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script>
// 用户第一次打开页面，还未滚动窗口的时候需要执行一次 lazyRender
lazyRender();
var clock;
$(window).on('scroll', function() {
//用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 lazyRender，若在300毫秒内再次滚动则清除原来的定时器
if (clock) {
clearTimeout(clock)
}
clock = setTimeout(function() {
lazyRender();
}, 300)
})
function lazyRender() {
$('.container img').each(function() {
//判断图片是否出现在可视窗口和图片是否已经加载
if (checkShow($(this)) && !isLoaded($(this))) {
//若图片出现在可是区域且没有加载，加载图片
loadImg($(this))
}
})
}
//判断图片出没出现在可视窗口
function checkShow($img) {
//获取浏览器窗口高度
var windowHeight = $(window).height(),
//获取窗口滚动的高度
windowScrolltop = $(window).scrollTop(),
//获取图片到页面顶部的高度
imgOffsettop = $img.offset().top,
//获取图片元素自己的高度,包括内外边距
imgHeight = $img.outerHeight(true);
if (windowHeight + windowScrolltop > imgOffsettop && imgOffsettop + imgHeight > windowScrolltop) {
return true
}
return false
}
//判断图片加没加载过
function isLoaded($img) {
return $img.attr('data_img') === $img.attr('src')
}
//加载图片
function loadImg($img) {
$img.attr('src', $img.attr('data_img'))
}
</script>
</body>
</html>
使用lazyload.js实现懒加载
引入js
在html中引入 jquery 和 jquery-lazyload.js
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="lazyload.js"></script>
基础使用
改变图片的标签，不使用src属性，因为使用src属性后就会默认发送请求请求图片，使用data-original代替，并使用特定的class=“lazy”
<img class="lazy" data-original="images/6.png" alt="" width="640"/>
添加jquery代码
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload();
})
</script>
jquery-lazyload参数配置
$("img.lazy").lazyload({
//threshold：设置threshold参数来实现滚到距离其xx px时就加载
threshold: -300,
//placeholder：代表某一图片路径，此图片用来占据将要加载的图片的位置，待图片加载时，占位图则会隐藏，比如放一些等待加载的图片来优化用户体验效果
//placeholder: "images/timg.gif",
placeholder_data_img:"images/timg.gif",
placeholder_real_img:"images/timg.gif",
//event：触发定义的事件时，图片才开始加载（此处click代表点击图片才开始加载，还有mouseover，sporty，foobar
//event: "click",
//event : "sporty",
//effects：图片显示时的效果，默认是show
effects: "fadeIn",
//container：其值为某容器的id或class值，lazyload默认在拉动浏览器滚动条时生效，这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
//container: $("#container")
});
2694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
