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

时间:2017-10-28 15:47:59

标签: javascript jquery

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

有人可以澄清我吗?感谢

3 个答案:

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

});