WordPress教程 添加jQuery让图片延迟加载代码 让网站访问速度更快

在网站中适时的使用图片延迟加载，可以减少请求，显著的提高多图片页面的加载速度。这也需要适当的使用图片延迟加载，图片延迟加载和无限下拉加载一样，对 js 支持不太好的搜索引擎不太友善，虽然大幅度的提高了网站的访问速度，但是搜索引擎也搜索不到了。大家可以根据需要自己选择

jQuery 图片 Lazyload。前提自然添加了 Jquery 代码：

<script type="text/javascript">

var _doLazyload = function ($el) {

var placeholder = $el.attr('placeholder');

if (!$el.attr('src') && placeholder) $el.attr('src', placeholder);

var source = $el.attr('data-source');

var eTop = $el.offset().top; //元素的位置

var validateDistance = $(window).height();

var loadMinHeight = $(document).scrollTop() - validateDistance;

var loadMaxHeight = $(document).scrollTop() + validateDistance;

if (eTop < loadMinHeight || eTop > loadMaxHeight) return;

var type = $el.data('type');

if (type == 'base64') {

 $.ajax({

 url: source,

 success: function (data) {

 _injectImg($el, data);

},

 isBlock: false

});

} else {

var img = new Image();

 img.src = source;

if (img.complete) {

 _injectImg($el, source);

 img = null;

} else {

 img.onload = function () {

 _injectImg($el, source);

 img = null;

};

}

}

};

var _injectImg = function ($el, data) {

if (!$el.attr('data-source')) return;

 $el.fadeOut(200, function () {

 $el.css('opacity', '0');

 $el[0].onload = function () {

 $el.fadeIn(200, function () {

 $el.css('opacity', '1');

});

};

 $el.attr('src', data);

});

 $el.removeAttr('data-source');

};

function Lazyload() {

var $el = $("body");

if ($el.data('source')) {

 _doLazyload($el);

} else {

var lazyloads = $el.find('img[data-source]');

for (var i = 0; i < lazyloads.length; i++) {

 _doLazyload($(lazyloads[i]));

}

}

}

</script>

在滚动事件中加入图片延迟加载代码：

$(document).scroll(function() {

Lazyload();

});

然后需要修改 wordpress 主题图片调用格式：

img 标签的写法：

<img data-source="http://www.***.com/***.jpg" placeholder=""  alt="" />

data-source 是图片的实际地址，placeholder 是未加载图片时显示的默认地址。