小小 网站图片Lazyload延迟加载技术
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试！ 广告
在访问图片量较大的网站时，搜索引擎往往把所有图片都加载了，网站才算加载完毕。要是服务器空间不给力，那个等待时间是非常痛苦的。采用图片延迟加载后，用户进入网站只会加载其中的一部分，随着鼠标的滚动才加载剩余的部分，用户体验要好得多。
接下来分享一个较简单的网站图片延迟加载效果。经测试有效。
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Lazy Load 图片延迟加载</title>
<!–[if lt IE 9]>
<script src=”html5shiv.js”></script><!–请下载到本地–>
<![endif]–>
</head>
<body>
<img class=”lazy” data-original=”img/pic1.jpg” width=”765″ height=”574″ alt=””>
<img class=”lazy” data-original=”img/pic2.jpg” width=”765″ height=”574″ alt=””>
<img class=”lazy” data-original=”img/pic3.jpg” width=”765″ height=”574″ alt=””>
<img class=”lazy” data-original=”img/pic4.jpg” width=”765″ height=”574″ alt=””>
<img class=”lazy” data-original=”img/pic5.jpg” width=”765″ height=”574″ alt=””>
<img class=”lazy” data-original=”img/pic6.jpg” width=”765″ height=”574″ alt=””>
<script src=”jquery-1.11.0.min.js”></script><!–请下载到本地–>
<script src=”jquery.lazyload.js”></script><!–请下载到本地–>
<script type=”text/javascript” charset=”utf-8″>
$(function() {
$(“img.lazy”).lazyload({effect: “fadeIn”});
});
</script>
</body>
</html>
所用到的页面代码及JS下载链接：http://pan.baidu.com/s/1hrSAiGk
图片延迟加载与AJAX列表排序使用注意事项
本人在做测试的时候发现：如果同时运用AJAX异步排序加载，参考文章《DedeCMS用AJAX实现列表按更新时间,点击,评论,星级排序》，出现加载不出对应的图片。采用模板AJAX局部替换的方法实现，务必把下面代码放在对应的AJAX模板后面（比如：list_article.htm对应的list_article_ajax.htm模板的后面），请参考本站任意一个列表页面代码。
<div id=”list”>
<div class=”listbox”>
<ul class=”e2″>
<div class=”data-list”>
{dede:list pagesize=”5″}
<li>
<a href='[field:arcurl/]’><img class=”lazy” data-original='[field:litpic/]’alt=”[field:title/]”/></a>
[<b>[field:typelink/]</b>]
<a href=”[field:arcurl/]” class=”title”>[field:title/]</a>
<span class=”info”>
<small>日期：</small>[field:pubdate function=”GetDateTimeMK(@me)”/]
<small>点击：</small>[field:click/]
<small>好评：</small>[field:scores/]
</span>
<p class=”intro”>[field:description/]…</p>
</li>
{/dede:list}
</div><!–data-list–>
</ul>
</div>
<!– /listbox –>
</div>
<script src=”jquery.lazyload.js”></script>
NOTICE:【咨询风格酷】客服微信：wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群：288678775
☉免责声明：本站所有模板均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。
☉如果源码网盘地址失效！或有其他问题，请点我报错,谢谢合作！
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服！
☉如有其他问题，请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源，都不包含技术服务，请大家谅解！
☉源码、模板等资源会随着技术、环境的升级而存在部分问题，还请慎重选择。
