这个功能是xiu主题自带的。
在网站中适时的使用图片延迟加载,可以减少请求,显著的提高多图片页面的加载速度。这也需要适当的使用图片延迟加载,图片延迟加载和无限下拉加载一样,对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是未加载图片时显示的默认地址。