当前位置:首页 > 网站建设 > wordpress > 网站建设 > 代码实现wordpress图片延迟加载(lazyload)

代码实现wordpress图片延迟加载(lazyload)

昨天技术宅在文章:wordpress优化加速的10个技巧说到我会在近期弄一弄代码实现wordpress博客图片延迟加载,今天技术宅根据一个lazyload的插件和网上众多的文章整理了一下如何代码实现这个功能,现在分享给大家。

对于lazyload大家肯定不陌生,当我们浏览图片比较多的博客时,如果发现下拉滚动条图片才加载(图片延迟加载),这应该是一个很酷的用户体验。同时也把宝贵的时间优先分配给网页前部的图片,这样用户等待时间会缩短不少,一举多得。

这一效果是通过jQuery插件实现的。所谓的jQuery插件就是用JavaScript编写的一段Js文件。通过加载这一插件,我们能够实现长页面中图片延迟加载的效果,也就是在浏览器可视区域外的图片不会被载入,直至将页面滚动到可视区域才加载相应图片。 使用这个插件可以加速载入包含有很多图片的文章。浏览器将会在加载可见图片之后进入就绪状态。在某些情况下还可以降低服务器负担.

具体的实现方法如下:

1、下载lazyload.js并上传到主题相应的目录中

下载地址(完整版 )https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js  打开页面后可以把代码复制到一个新建的js文档中,之后命名为lazyload.js并上传到主题相应的目录中即可。

2、在header.php文件中添加如下代码:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js”></script>
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
placeholder : “<?php bloginfo(‘template_directory’);?>/images/grey.gif”,
effect : “fadeIn”
});
});
</script>

添加位置置于meta信息之后即可。

至此,lazyload效果添加完毕。
代码说明:

第1行是说明调用jQuery库

第2行是说明lazyload.js文件的载入位置,<?php bloginfo(‘template_directory’);?>是调用相应主题路径的语句。

第5行img是延迟加载所有图片,可根据实际情况更改,有时候我们并不想将侧边栏的留言者的头像延迟加载,而只是要实现文章中的图片使用该效果,则根据实际情况修改相应的img语句即可,比如#post img

第6行语句是在图片加载前先用一个透明的灰色1×1像素的图片进行占位(这个图片时需要自己准备好放置在主题的images目录下)。

第7行是实现图片“淡入”的效果。

一些其他的效果和说明:

1.当图片没有看到之前先把图片载入200像素(不设置的话,默认载入像素是零)

$(“img”).lazyload({ threshold : 200 });

2.在图片加载前先用一个透明的灰色1×1像素的图片进行占位

$(“img”).lazyload({ placeholder : “img/grey.gif” });

3.自定义触发事件进行载入:比如“click”(鼠标点击)和”mouseover”(鼠标滑过)等事件触发加载图片,使用自定义的事件, 如: sporty 和 foobar;默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置。 在灰色占位图片被点击之前阻止加载图片:

$(“img”).lazyload({

placeholder : “img/grey.gif”,

event : “click”

});

4.通过定义effect 参数来定义一些图片显示效果,比如fadeIn

$(“img”).lazyload({

placeholder : “img/grey.gif”,

effect : “fadeIn”

});

5.图片在容器内显示:可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象.

CSS文件中:

#container {

height: 600px;

overflow: scroll;

}

JavaScript 代码:

$(“img”).lazyload({

placeholder : “img/grey.gif”,

container: $(“#container”)

});

6.当图片不连续时:当图片不是连续排列,我们滚动页面的时候,lazy load会循环加载图片。在循环加载中,它会检查图片是否在可见区域内,默认情况是在找到第一张不在可视区域内的图片后,会停止循环。图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$(“img”).lazyload({

failurelimit : 10

});

设定failurelimint参数为10,它会当载入10张照片之后,停止寻找图片载入;

7.延迟载入图片:Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function() {

$(“img:below-the-fold”).lazyload({

placeholder : “img/grey.gif”,

event : “sporty”

});

});

$(window).bind(“load”, function() {

var timeout = setTimeout(function() {$(“img”).trigger(“sporty”)}, 5000);

});

最后,技术宅想说这个lazyload效果还是蛮炫的,建议有兴趣的朋友可以多尝试下。

Reference:http://bbs.54bb.com/view_4_2842.html

友荐云推荐
  • «
  • »
  • 作者:
    除非注明,本文原创:技术宅,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.jishuzh.com/web/代码实现wordpress图片延迟加载(lazyload).html

    4 thoughts on “代码实现wordpress图片延迟加载(lazyload)

    1. 石家庄婚纱摄影

      对这个不懂啊

    2. 黑涩的猪

      第一眼,还以为我进了iwanpc呢

      1. unclezhou (Post author) 

        呵呵 确实是用了同一个主题

    3. 足球比分

      沙发!嘻嘻!

    评论已关闭.