请在Chrome、Firefox等现代浏览器浏览本站。网站域名:森林之家(www.foresthouse.cn)爱学习、爱分享、爱绿软、爱恐怖、爱音乐、爱唠叨、爱折腾、爱生活!

一步一步教你用jQuery.lazyload延时加载图片

心得笔记 forest 1209℃ 已收录 7评论

现在都什么年代了你还在用框架式的网站?完全没有feel……今天来说下,利用lazyload来延时加载网站内的所有图片,让网站炫起来!
第一步:在网站头部引用lazyload,可以把lazyload文件下载下来也可以直接在各大公共库中引用,这里以百度演示。

一步一步教你用jQuery.lazyload延时加载图片

<script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js" type="text/javascript"></script>
注意:不可以放在底部哦,一定要放在站内需要延时加载图片的上方。
第二步:在网站所有图片中指定要延时加载的图片,这里以织梦系统的网站为例:
<img class="lazy" data-original="[field:first_imgurl/]" src="[field:litpic/]"/>
说明:上面就是把图片指定到lazy样式中,“data-original”一定要是网站真实要显示的图片地址。
第三步:在网站底部加入以下代码,恰恰和第一步相反:
<script type="text/javascript">
$("img.lazy").lazyload({ effect : "fadeIn"
});
</script>
好了到这里就结束了,提醒一点如果空间比较拮据就使用第三方公共库,不要使用360的哦,其它我就不说了首先之前说的多少多少G又多少多少T永久使用的云盘现在关了,之前又说的公共库方便站长使用现在已停了,好像这段时间又可以用了如此反复无常的大妖怪还是远离为妙。

下面这是jQuery.lazyload延时加载图片演示网页

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:http://www.foresthouse.cn/archives/5557.html
喜欢 (0)or分享 (0)
发表我的评论(注:在您评论完以后不会立即显示,请不要重复刷新以免进入黑名单。)
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(7)条精彩评论。
  1. 签到成功!签到时间:2017-10-11 16:45:59,每日打卡,生活更精彩哦~Romania 火狐浏览器 Windows 10 罗马尼亚
    http://www.rushmyessay.cn/2017年-10月-11日发表回复| Firefox 54.0| unknow
  2. 真是学无止境来自天朝的朋友 搜狗浏览器 Windows 8.1 中国浙江温州
    木子2017年-09月-13日发表回复| Google Chrome 49.0.2623.221| Windows 8.1 x64
  3. 值得思考哦,受教了!来自天朝的朋友 搜狗浏览器 Windows 7 中国山东菏泽
    杭州家政网2017年-07月-23日发表回复| Google Chrome 14.0.802.30| Windows 7
  4. 我也有过博客,不过那都是很多年前的事情了!来自天朝的朋友 搜狗浏览器 Windows 7 中国山东菏泽
    增达2017年-07月-20日发表回复| Google Chrome 14.0.802.30| Windows 7
  5. 向经典致敬,与时代同行!来自天朝的朋友 搜狗浏览器 Windows 7 中国山东菏泽
    安科迪智能技术有限公司2017年-07月-19日发表回复| Google Chrome 14.0.802.30| Windows 7
  6. 玉不琢不成器,人不学不知道,拜读了!来自天朝的朋友 搜狗浏览器 Windows 7 中国安徽淮北
    增达2017年-07月-13日发表回复| Google Chrome 14.0.802.30| Windows 7
  7. 真是学无止境!来自天朝的朋友 搜狗浏览器 Windows 7 中国安徽淮北
    三五营销软件2017年-07月-11日发表回复| Google Chrome 14.0.802.30| Windows 7