实现WordPress图片延迟加载 (图片随滚动条渐显效果)

这个特效是少有的即华丽又加速的效果,个人觉得功能比较实用,因为它能判断访客是不是在查看当前图片,若非则加载预留的填充图片grey.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载。也就是说,如果访客瞬间打开你的页面,然后瞬间关闭,处于页脚的图片是不被加载的,何乐而不为呢? 不用担心对访客的友好程度,这个效果会在图片即将被浏览到的时候就开始加载图片。

图片延迟加载效果实现方法:(先决条件是:你的站加载了Jquery.js)

下载 jquery.lazyload.js
下载 预填充图片 grey.gif
点此打包下载

将上面jquery.lazyload.js 放到你wordpress主题下的js目录(没有该目录就自己新建一个),grey.gif放到你wordpress主题下的images目录,或者你直接在站外调用,只是要记得修改下面的代码路径就行。然后在当前主题的header.php 中适当位置添加下面JS调用代码。
$("img")部分可以限定对页面中的哪些img生效,比如修改成 $(".content img")或者$(".post img"),$(".post img")好像是只有文章正文的图片应用该效果。

<script type="text/javascript" src="<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js"></script>

<script type="text/javascript">
    // Delay Image
    $(function() {         
        $(".post img").lazyload({
            placeholder : "<?php bloginfo(‘template_url’); ?>/images/grey.gif",
            effect : "fadeIn"
          });
        });
</script>

注:我是把上面代码放在下面代码之下的。

<script type="text/javascript" src="<?php bloginfo(‘template_directory’);?>/js/jquery.js"></script>

以上js能对无觅相关文章图片进行缓存加载,感觉相当不错,本博客也使用了。

 

转自:http://mmm.eu5.org/post/jquery-lazyload.html

此条目是由 malu8 发表在 未分类 分类目录的。将固定链接加入收藏夹。

评论已关闭。