前端网站的图片延时加载技术
1、导入JQuery的js和JQuery延迟加载的js
<!--第一步--><scripttype="text/javascript"src="js/jquery.js"></script>
<!--lazyload--><scripttype="text/javascript"src="js/jquery.lazyload.js"></script>
2、延迟加载的Js
<scripttype="text/javascript">
var Img = "images/lazyload.gif";
jQuery.noConflict()(function(){
jQuery.noConflict()("img").lazyload({placeholder:Img,effect:"fadeIn"});
});
</script>
3、完整的代码
<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码集charset=GBK，gb2312(中文编码)，UTF-8(国际编码)-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<!--css: 层叠样式表，一件美丽的外衣-->
<!--内嵌样式-->
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;background:#f9f9f9;}
img{border:0;display:block;}
/*以“.”开头的css样式称之为 类样式*/
.top{width:1000px;height:66px;margin:0 auto;}
.top .logo{float:left;}
.top .qq{float:right;height:66px;line-height:66px;font-size:26px;
font-weight:bold;
}
.top .qq span{color:#ff5f25;}
/*图片部分*/
.pic{width:900px;margin:30px auto;}
.pic ul li{list-style:none;float:left;
/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);*/
margin-right:12px;margin-bottom:10px;
}
.pic ul li p {width:288px;height:35px;text-align:center;line-height:35px;background:#fff;}
.pic ul li a:hover img{opacity:0.8;filter:alpha(opacity=80);}
</style>
<!--第一步-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--lazyload-->
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
var Img = "images/lazyload.gif";
jQuery.noConflict()(function(){
jQuery.noConflict()("img").lazyload({placeholder:Img,effect:"fadeIn"});
});
</script>
</head>
<body>
<!--div:层，容器，盒子-->
<div class="pic">
<!--无序列表-->
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/9.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/10.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/11.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/12.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/13.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/14.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/9.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/10.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/11.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/12.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/13.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/14.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/9.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/10.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/11.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/12.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/13.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/14.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/4.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/8.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/9.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/10.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/11.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/12.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/13.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
<li>
<a href="#">
<img src="images/14.jpg" alt="" width="288" height="180"/>
</a>
<p>
绿丛小花精美摄影
</p>
</li>
</ul>
</div>
</body>
</html>
