我们平时所看到的网站中的文件、图片等它们并不是属于浏览器的,而是浏览器通过域名到服务器里面请求下载过来的,而下载这些东西需要时间,如果文件非常多非常大,那么下载就会需要很长的时间,这时就会用到懒加载技术,分批次加载这些文件。用户永远只可能看到一个窗口的内容,所以我们就可以先加载一个窗口的内容,再随着滚动条继续加载。例如我们保存的整个京东网页的图片,我们看到的区域为加载出来的图片,而看不到的区域都用京东狗的标志图代替了
如果一次加载若干个图片,每个图片都要去访问服务器,那么就会造成服务器的压力。所以我们可以先把这些图片下载下来存储在浏览器的缓存里面,下一次用到的时候直接到浏览器的缓存里面拿来用就行了,不必到浏览器去请求这么多图片。这样子就变相地提高了加载速度,当滚动条往下面滚动时就会把图片替换回来,这样每一次加载的图片数量就少了,提高了网站性能。
下面带大家看一个懒加载技术的例子,代码如下:
<!--
声明文档类型:html(html5)
作用:符合W3C的统一标准规范
每个浏览器对html css js的代码都有不同的编译模式(即兼容模式)
-->
<!DOCTYPE html>
<html><!--超文本标记语言 根目录节点标签-->
<head><!--头部:可视化标签-->
<meta charset="utf-8" /><!--字符编码:国际编码-->
<title>图片懒加载技术</title>
<meta name="description" content="描述:对网页内容的大概的介绍">
<meta name="keyworders" content="关键词1,关键词2">
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #434343;
}
#box{
width:930px;
/*height:500px;*/
background-color:#2D2D2E;
margin:50px auto;/*上下50px,左右自动居中*/
border-radius: 10px;
overflow: hidden;/*超出隐藏*/
}
#box img{
float:left;
width:288px;
height:175px;
margin:10px;
border:1px solid #fff;
border-radius: 10px;
}
#box img:hover{
opacity:0.5;/*改变透明度*/
}
</style>
</head>
<body><!--身体 可视化标签-->
<div id="box">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
<img src="img/pic4.jpg">
<img src="img/pic1.jpg" >
<img src="img/pic2.jpg">
<img src="img/pic3.jpg" >
<img src="img/pic4.jpg">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/lazyload.js"></script>
<script>
var lazyload=$.noConflict();
lazyload(function(){
lazyload("img").lazyload({
placeholder:"img/loading.png"
})
})
</script>
</body>
</html>
在上面的js代码中我引入了一个用jQuery插件库封装出来的懒加载插件,有需要的可以找我获得哦!!!