Question

我正在为项目使用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"); 
}

有人可以澄清我吗？感谢

Answer 1

您需要使用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);

Answer 2

如果您使用任何类似Angular的框架，数据绑定会负责持续检查要添加或删除的类。在其他情况下，你必须使用＆＃34; setInterval＆＃34; JavaScript的功能。例如：

setInterval (function () {
   // Your Code...
}, some frequency of time)

Answer 3

我认为

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');
}

}）;

如果类“.loading”处于活动状态，则添加body类

3 个答案: