用jQuery实现图片延迟加载的方法 Lazy Load

在浏览有些网站时,发现图片是在下拉滚动条时才加载,这不仅是一个很不错的用户体验,还可以加快网站的速度。很多大型网站都在用,好处还是蛮多的。现在很多WordPress主题已经自带了这功能,如果没有自带jQuery实现图片延迟加载可以看看这篇文章。

对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片,让浏览者在下拉滚动条时才加载图片。

Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后再加载 Lazy Load 的 Javascript 文件

首先下载lazyload,解压后上传放到主题目录中,然后在header.php模板文件标签前添加如下代码:

<script type=”text/javascript” src=”这里填写具体的存放路径/lazyload.js”></script>

然后在页面的 header 添加如下代码即可:

<script type=”text/javascript”></script>
$(document).ready(function(){
$(“img”).lazyload({
placeholder : “/images/grey.gif”,
effect : “fadeIn”
});
}
</script>

首先确保你的页面已经加载 jQuery Javascript 库 如果没有可以在header.php模板文件 head 部分添加:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇