Question

我正在使用此插件在我的网站上延迟加载图片：https://github.com/verlok/lazyload/blob/master/demos/fade_in.html

延迟加载似乎已初始化，但是如上链接所示，我无法获得渐入渐出的效果。我正在使用的网站是deannoble.com.au

在html中，我正在图像上使用data-src：

<img data-src="images/thumb-4.jpg" class="img-fluid works" alt="img"/>

我的CSS是：

img:not(.initial) {
    transition: opacity 3s;
}
img.initial,
img.loaded,
img.fluid,
img.works,
img.error {
    opacity: 1;
}

img:not([src]) {
    visibility: hidden;
}

而我的js是：

(function() {
    function logElementEvent(eventName, element) {
        console.log(Date.now(), eventName, element.getAttribute("data-src"));
    }

    var callback_enter = function(element) {
        logElementEvent("? ENTERED", element);
    };
    var callback_exit = function(element) {
        logElementEvent("? EXITED", element);
    };
    var callback_loading = function(element) {
        logElementEvent("⌚ LOADING", element);
    };
    var callback_loaded = function(element) {
        logElementEvent("? LOADED", element);
    };
    var callback_error = function(element) {
        logElementEvent("? ERROR", element);
        element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder";
    };
    var callback_finish = function() {
        logElementEvent("✔️ FINISHED", document.documentElement);
    };
    var callback_cancel = function (element) {
        logElementEvent("? CANCEL", element);
    };

    var ll = new LazyLoad({
        threshold: 0,
        cancel_on_exit: true,
        // Assign the callbacks defined above
        callback_enter: callback_enter,
        callback_cancel: callback_cancel,
        callback_exit: callback_exit,
        callback_loading: callback_loading,
        callback_loaded: callback_loaded,
        callback_error: callback_error,
        callback_finish: callback_finish
    });
})();

这里的任何提示都很棒！谢谢。

Answer 1

使用此代码：

//lazy load images
img[src=""],
img:not([src]) {
  visibility: hidden;
  opacity: 0;
}

img:not([src=""]) {
  opacity: 1;
  transition: opacity 0.5s;
}

尝试实现lazyload“淡入”，但似乎无法正常工作

1 个答案: