^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

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

这个功能是 xiu 主题自带的。

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

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

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

赠人玫瑰,手有余香。