我正在为项目使用lazyload,它会逐步加载图像。
https://github.com/verlok/lazyload
加载图片时,<img class = "loading"> ... </ img>
当它完成加载时,“loading”类被“loaded”类替换
我想知道是否可以根据“loading”类的活动向div添加一个类。
我做了一个相当质朴的例子,只是为了展示我的目标。
if ($('img').hasClass('loading')) {
$("body").addClass("images-is-loading");
$(".post-thumbnail").addClass("post-images-is-loading");
}
有人可以澄清我吗?感谢
答案 0 :(得分:0)
您需要使用setInterval
定期检查病情。以下是示例代码:
setInterval(function() {
if ($("img.loading").length) {//Checks if there is such element
$("body").addClass("images-is-loading");
$(".post-thumbnail").addClass("post-images-is-loading");
} else {
$("body").removeClass("images-is-loading");
$(".post-thumbnail").removeClass("post-images-is-loading");
}
}, 1000);
答案 1 :(得分:0)
如果您使用任何类似Angular的框架,数据绑定会负责持续检查要添加或删除的类。 在其他情况下,你必须使用&#34; setInterval&#34; JavaScript的功能。 例如:
setInterval (function () {
// Your Code...
}, some frequency of time)
答案 2 :(得分:0)
setInterval对此不是很好,也许最好在回调事件中查找构建:
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
class_loading: "loading-img",
callback_enter: function(el) {
$(body).addClass('loading');
},
callback_loaded: function(el) {
$(body).removeClass('loading');
}
});