【好运3分快3开奖】加快页面打开速度!WordPress图片实现真正延迟加载

  • 时间:
  • 浏览:1

网页打开带宽的好慢直接影响到网站的访问,大多数用户基好运3分快3开奖本上不必对超过5秒钟还没有完整篇 打开的网页产生任何好感。根据相关的研究发现,一另另另一个网站的图片太满,图片文件过大,页面太长,是由于网页打开时间过长的主要由于之一。

没有人一个劲抱怨Wordpr好运3分快3开奖e好运3分快3开奖ss网页打开带宽太慢,为了提升WordPress的打开带宽,没没有人不妨好好研究一下怎么来加快网页中的图片的打开带宽。 对图片太满的网页,不妨借鉴一下微博、淘宝和瀑布流主题的“按需加载”土最好的最好的办法来加快带宽。

于是都有 了本文的实现文章图片真正延迟加载的主题了,它的目的可是实现在浏览器可视区域外的图片不必被载好运3分快3开奖入,直到用户将页面滚动到它们所在的位置。对于好运3分快3开奖然后 图片有点儿多的网站,利用图片延迟加载技术可不可以在一定程度上减轻服务器压力。

图片延迟加载效果然后部落也用过一段时间,不以然后发现在网速慢的具体情况下有看一遍网页上的图片实际不可能 完整篇 加载完成了,然后才看一遍Lazy Load的渐隐效果,没有 实际上是“伪延迟”,顶多给图片加了点展示的特效,实际用处不大,然后就放弃了。

这次说要的是实际真正的延迟加载,实际上仍然来源于然后的Lazy Load插件,只不过经过改良然后,Lazy Load插件让图片真正实现了延迟加载。

WordPress图片实现真正延迟加载-加快页面打开带宽减轻服务器压力

一、Wordpress图片延迟加载准备工作

1、Lazy Load jQuery plugin地址:

  • 1、官方网站:http://www.appelsiini.net/projects/lazyload
  • 2、Github:https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

2、下载并上传jquery.lazyload.js到你的网站服务器上,这是 Lazy Load jQuery plugin下载地址(http://www.freehao123.com/dl-lazy-load-jquery-plugin/)。

3、编辑你的Header.php文件,不可能 是其它的不必 使用JS在任意页面调用的Wordpress主题文件,插进以下代码:

  • <script src="http://www.freehao123.com/jquery.lazyload.js" type="text/javascript">
  • </script>

4、注意要将代码中的域名换你另一方的,JS的路径也要相应的更改过来,不可能 你的Wordpress没有加载jQuery,还得另一方手动加带代码加载jQuery v1.4.4+。(PS:现在的Wordpress主题应该都有 加载jQuery)

5、然后在你的</head>前面加入以下JS代码,激活jquery.lazyload.js。

  • <script type="text/javascript">
  • jQuery(function() {        
  • jQuery("img").lazyload({
  • effect : "fadeIn",
  • failure_limit : 10 });
  • });
  • </script>

二、修改图片IMG标签启用迟延加载

1、Lazy Load 要求图片的IMG属性写成没有 的不必 否正确启用延迟加载效果。

  • <img src="https://upload.chinaz.com/2015/0114/14212294116300.png" data-original="xxxx/xxxx/example.jpg"  width="3000" heigh="300">

2、基本要求是:src中赋予一另另另一个1x1大小图片,data-original中写入图片的真实地址。

3、Lazy Load 延迟加载图片的原理是:打开网页时所有的图片是一另另另一个1x1大小默认图片,随着网页的拖动,Lazy Load jQuery plugin会“按需”将可视窗口内图片的src值替加带data-original的值,从而显示图片,其它的没哟可视范围内的依然是被默认的图片所代替。

4、太满太满,建议没没有人将默认的src的图片插进然后 免费CDN服务器上,不可能 是其它的主机空间上,以最大限度地减少图片对自身服务器的请求,一同最好是个微小的图片,相似1x1大小,没有 可不可以保证默认图片以最短的时间加载进来,将图片加载时间降低到最低。

5、通过顶端的设置,网站上所有的图片就会启用Lazy Load延迟加载技术了。

有好的文章希望站长之家帮助分享推广,猛戳这里我不必 投稿