Question

我目前正在定制我买的一个wordpess主题，它在其图片库中使用了一个lazyload函数。

就像现在一样，lazyload函数只加载可见图像（然后被缓存）。相邻的图像隐藏在下面，只有在通过图库单击“下一个/上一个”时才会显示。

这个结果是图像之间的一秒钟空白，感觉非常不舒服。一旦图像被缓存，整个NEXT / PREVIOUS过程似乎更流畅。

有没有人知道是否有办法以某种方式调整下面的lazyload代码，所以它不仅会预先加载当前图像，还会预先加载下一张和上一张图像？甚至在代码的这一部分中是否可能？

我试图自己找一段时间，但无法解决它......

请原谅可怕的格式，这实际上是文件是如何与主题一起传递的。编辑：重新格式化代码以提高可读性。

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2012 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.8.0
 *
 */
(function(a, b) {
    var c = a(b);
    a.fn.lazyload = function(d) {
        function h() {
            var b = 0;
            e.each(function() {
                var c = a(this);
                if (g.skip_invisible && !c.is(":visible")) return;
                if (!a.abovethetop(this, g) && !a.leftofbegin(this, g))
                    if (!a.belowthefold(this, g) && !a.rightoffold(this, g)) c.trigger("appear");
                    else if (++b > g.failure_limit) return !1
            })
        }
        var e = this,
            f, g = {
                threshold: 0,
                failure_limit: 0,
                event: "scroll",
                effect: "show",
                container: b,
                data_attribute: "original",
                skip_invisible: !0,
                appear: null,
                load: null
            };
        return d && (undefined !== d.failurelimit && (d.failure_limit = d.failurelimit, delete d.failurelimit), undefined !== d.effectspeed && (d.effect_speed = d.effectspeed, delete d.effectspeed), a.extend(g, d)), f = g.container === undefined || g.container === b ? c : a(g.container), 0 === g.event.indexOf("scroll") && f.bind(g.event, function(a) {
            return h()
        }), this.each(function() {
            var b = this,
                c = a(b);
            b.loaded = !1, c.one("appear", function() {
                if (!this.loaded) {
                    if (g.appear) {
                        var d = e.length;
                        g.appear.call(b, d, g)
                    }
                    a("<img />").bind("load", function() {
                        c.hide().attr("src", c.data(g.data_attribute))[g.effect](g.effect_speed), b.loaded = !0;
                        var d = a.grep(e, function(a) {
                            return !a.loaded
                        });
                        e = a(d);
                        if (g.load) {
                            var f = e.length;
                            g.load.call(b, f, g)
                        }
                    }).attr("src", c.data(g.data_attribute))
                }
            }), 0 !== g.event.indexOf("scroll") && c.bind(g.event, function(a) {
                b.loaded || c.trigger("appear")
            })
        }), c.bind("resize", function(a) {
            h()
        }), h(), this
    }, a.belowthefold = function(d, e) {
        var f;
        return e.container === undefined || e.container === b ? f = c.height() + c.scrollTop() : f = a(e.container).offset().top + a(e.container).height(), f <= a(d).offset().top - e.threshold
    }, a.rightoffold = function(d, e) {
        var f;
        return e.container === undefined || e.container === b ? f = c.width() + c.scrollLeft() : f = a(e.container).offset().left + a(e.container).width(), f <= a(d).offset().left - e.threshold
    }, a.abovethetop = function(d, e) {
        var f;
        return e.container === undefined || e.container === b ? f = c.scrollTop() : f = a(e.container).offset().top, f >= a(d).offset().top + e.threshold + a(d).height()
    }, a.leftofbegin = function(d, e) {
        var f;
        return e.container === undefined || e.container === b ? f = c.scrollLeft() : f = a(e.container).offset().left, f >= a(d).offset().left + e.threshold + a(d).width()
    }, a.inviewport = function(b, c) {
        return !a.rightofscreen(b, c) && !a.leftofscreen(b, c) && !a.belowthefold(b, c) && !a.abovethetop(b, c)
    }, a.extend(a.expr[":"], {
        "below-the-fold": function(b) {
            return a.belowthefold(b, {
                threshold: 0
            })
        },
        "above-the-top": function(b) {
            return !a.belowthefold(b, {
                threshold: 0
            })
        },
        "right-of-screen": function(b) {
            return a.rightoffold(b, {
                threshold: 0
            })
        },
        "left-of-screen": function(b) {
            return !a.rightoffold(b, {
                threshold: 0
            })
        },
        "in-viewport": function(b) {
            return !a.inviewport(b, {
                threshold: 0
            })
        },
        "above-the-fold": function(b) {
            return !a.belowthefold(b, {
                threshold: 0
            })
        },
        "right-of-fold": function(b) {
            return a.rightoffold(b, {
                threshold: 0
            })
        },
        "left-of-fold": function(b) {
            return !a.rightoffold(b, {
                threshold: 0
            })
        }
    })
})(jQuery, window)

Answer 1

不要修改libs。而是触发lazyload事件

触发加载事件您可以使用 jQuery 事件，例如click或mouseover。您还可以使用sporty或foobar等自定义事件。默认是等到用户向下滚动并且图像出现在视口上。

只有在用户点击图片时才能加载图片：

$("img.lazy").lazyload({
    event : "customloadimage" 
});

然后在 jQuery 中使用$image.trigger('customloadimage'); （假设$image是 jQuery 对象）

参考文献：

https://www.appelsiini.net/projects/lazyload

http://api.jquery.com/trigger/

Answer 2

如果您使用Intersection Observer API（或使用此API的插件），则可以利用“rootMargin”设置。例如，通过将其设置为“800px”，它将在进入视口之前将图像延迟加载800px。

lazyload - 预加载相邻图像

2 个答案: