尝试实现延迟加载"淡入"，但它似乎无法正常工作

Question

我正在使用这个插件在我的网站上发布图片：https://github.com/verlok/lazyload/blob/master/demos/fade_in.html

Lazylod似乎在初始化，但我无法获得上面链接中看到的淡入效果。我正在使用的网站是deannoble.com.au

在html中，我在图像上使用数据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;
}