WordPress主题添加jQuery图片延迟加载Lazyload代码

这个功能是 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 是未加载图片时显示的默认地址。