【推荐理由】赠运费险
【优惠券】20 【券后价】59.00
【下单链接】18￥ CZ0001 G5fHdEqOsnB￥
今天碰到一个客户说怎么把现有的网站让打开的速度快点，在查看了客户的服务器后,就一个大众版阿里云云主机，使用图片延时可是解决。本章有温州天时网站建设整理收集，不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载。可以看看这个不使用插件的页面对比效果，还可以使用淡入动画效果示例、水平滚动示例、容器内的水平滚动示例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片加载技术实例-欢迎关注tinyphp的博客</title>
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({
placeholder : "images/loading.gif",
effect: "fadeIn"
});
});
</script>
<style>
img a,img{border:0px;}
div{ margin-bottom:10px;}
</style>
</head>
<body>
<img src="images/0.jpg" /><br />
<div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>jquery下载个较新的库就可以了，
jquery.lazyload.js的说明：
http://www.appelsiini.net/projects/lazyload
下载地址:
原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
缩减版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
1、基础示例
不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载。可以看看这个不使用插件的页面对比效果，还可以使用淡入动画效果示例、水平滚动示例、容器内的水平滚动示例。
$('img').lazyload();2、使用淡入动画效果
不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载，并使用淡入的效果。
$('img').lazyload({
effect:'fadeIn'});3、不支持 JavaScript 时的降级处理
演示在不支持 JavaScript 的浏览器访问时，是如何运作的。参照下面的代码：
.lazy { display: none;
}$('img.lazy').show().lazyload({
effect: 'fadeIn'});<img class="lazy" src="grey.gif" data-original="example.jpg" width="765" height="574"><noscript><img src="example.jpg" width="765" height="574"></noscript>
4、水平滚动
不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载。
5、容器内的水平滚动
不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载。
6、容器内的垂直滚动
不加载显示区域外的图片，当浏览器滚动使图片进入显示区域时才会进行加载。
7、大量图片加载
当页面中存在上百张，甚至数百张图片时，建议使用 scrollstop 事件。
<script src="jquery.scrollstop.js"></script> <img src="grey.gif" data-original="example.jpg">
$('img').lazyload({
event: 'scrollstop'});
8、定时加载图像
当前显示区域内的图像会进行加载，显示区域以外的图像会在延迟 5 秒之后进行加载。
下载js插件
http://code.ciaoca.com/jquery/lazyload/demo/
