Add a class in a div based on the time class of another

Asked

Viewed 54 times

2

I’m using lazyload for a project, it carries images progressively.

https://github.com/verlok/lazyload

When images are loading, the "loading" class is active in the tag <img class="loading">...</img>

and when finished loading, the loading class is replaced by the "Loaded"

I want to know if it would be possible to add a class in a div based on the activity of the loading class.

I made a rather rustic example, just to demonstrate my goal.

if ($('img').hasClass('loading')) { 
$("body").addClass("images-is-loading"); 
$(".post-thumbnail").addClass("post-images-is-loading"); 
}

Does anyone know how I could do that? I appreciate.

javascript jquery

  • "add a class in a div based on the activity of the loading class" - how so ? Give a concrete example. And it seems to me that this is a XY problem. Your overall idea of this solution is which ?

  • I do not see how it could be clearer in such a case, I do not imagine a solution to this problem, my rustic example was just to demonstrate the situation. see this demo http://www.andreaverlicchi.eu/lazyload/demos/lazily_load_lazyLoad.html &#Xa I want to add a class to another element while the loading class is active.

  • But you’re trying to replicate the lazyloading library you quoted by hand ? Or just want to add a class to the body if an image is still loading ? Both jquery and pure javascript have the event load that can implement for when an image fully loads

  • I just want to add a class to the body while some image is still loading! That’s all.

  • I have no idea how to do that. So the question. The example in my question was only to demonstrate what I need, not my idea of a solution. I need to add a class in Body or a div, while the loading class temporarily appears while the images are loading.

1 answer

1


You can do this by counting how many images do not have the class .loaded in div. When all have the class, you do what you want. In the example below I reduced the amount of images for better demonstration:

// lazy load plugin
var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";var e={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null},t=function(e,t){return e.getAttribute("data-"+t)},n=function(e,t,n){return e.setAttribute("data-"+t,n)},r=function(e){return e.filter(function(e){return!t(e,"was-processed")})},s=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},o=function(e,n){var r=n.data_srcset,s=e.parentNode;if("PICTURE"===s.tagName)for(var o,a=0;o=s.children[a];a+=1)if("SOURCE"===o.tagName){var i=t(o,r);i&&o.setAttribute("srcset",i)}},a=function(e,n){var r=n.data_src,s=n.data_srcset,a=e.tagName,i=t(e,r);if("IMG"===a){o(e,n);var c=t(e,s);return c&&e.setAttribute("srcset",c),void(i&&e.setAttribute("src",i))}"IFRAME"!==a?i&&(e.style.backgroundImage='url("'+i+'")'):i&&e.setAttribute("src",i)},i="classList"in document.createElement("p"),c=function(e,t){i?e.classList.add(t):e.className+=(e.className?" ":"")+t},l=function(e,t){i?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},u=function(e,t){e&&e(t)},d=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},f=function(e,t){var n=function n(s){_(s,!0,t),d(e,n,r)},r=function r(s){_(s,!1,t),d(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},_=function(e,t,n){var r=e.target;l(r,n.class_loading),c(r,t?n.class_loaded:n.class_error),u(t?n.callback_load:n.callback_error,r)},v=function(e,t){u(t.callback_enter,e),["IMG","IFRAME"].indexOf(e.tagName)>-1&&(f(e,t),c(e,t.class_loading)),a(e,t),n(e,"was-processed",!0),u(t.callback_set,e)},m=function(t,n){this._settings=_extends({},e,t),this._setObserver(),this.update(n)};m.prototype={_setObserver:function(){var e=this;if("IntersectionObserver"in window){var t=this._settings;this._observer=new IntersectionObserver(function(n){n.forEach(function(n){if(n.isIntersecting||n.intersectionRatio>0){var r=n.target;v(r,t),e._observer.unobserve(r)}}),e._elements=r(e._elements)},{root:t.container===document?null:t.container,rootMargin:t.threshold+"px"})}},update:function(e){var t=this,n=this._settings,s=e||n.container.querySelectorAll(n.elements_selector);this._elements=r(Array.prototype.slice.call(s)),this._observer?this._elements.forEach(function(e){t._observer.observe(e)}):(this._elements.forEach(function(e){v(e,n)}),this._elements=r(this._elements))},destroy:function(){var e=this;this._observer&&(r(this._elements).forEach(function(t){e._observer.unobserve(t)}),this._observer=null),this._elements=null,this._settings=null}};var b=window.lazyLoadOptions;return b&&function(e,t){if(t.length)for(var n,r=0;n=t[r];r+=1)s(e,n);else s(e,t)}(m,b),m});

var img_len;
(function() {
    var lazyLoadInstances = [];
    // The "lazyLazy" instance of lazyload is used (kinda improperly) 
    // to check when the .horzContainer divs enter the viewport
    var lazyLazy = new LazyLoad({
        elements_selector: ".horzContainer",
        // When the .horzContainer div enters the viewport...
        callback_set: function(el) {
            // ...instantiate a new LazyLoad on it
            var oneLL = new LazyLoad({
                container: el
            });
            // Optionally push it in the lazyLoadInstances 
            // array to keep track of the instances
            lazyLoadInstances.push(oneLL);
        }
    });
    
    $("body").addClass("images-is-loading"); 

    // conto a quantidade de imagens
    img_len = $(".horzContainer img").length;

})();

$(".horzContainer").on("scroll", function(){
   if($(".horzContainer img.loaded").length == img_len){
      $("body").removeClass("images-is-loading");
      alert("Todas as imagens foram carregadas");
   }
});
    html {
        box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
    
    .horzContainer {
        max-width: 100%;
        overflow: auto;
        display: flex;
    }
    
    .item {
        min-width: 200px;
    }
    
    figure {
        margin: 10px;
    }
    
    img {
        width: 200px;
        height: 200px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="horzContainer">
    <figure class="item">
        <img src="" alt="Row 03, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_01&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 01</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_02&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 02</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_03&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 03</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_04&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 04</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_05&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 05</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_06&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 06</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_07&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 07</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_08&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 08</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_09&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 09</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_10&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 10</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_11&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 11</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_12&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 12</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_13&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 13</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_14&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 14</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 03, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_03_col_15&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 15</figcaption>
    </figure>
</div>
<div class="horzContainer">
    <figure class="item">
        <img src="" alt="Row 04, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_01&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 01</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_02&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 02</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 03" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_03&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 03</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 04" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_04&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 04</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 05" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_05&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 05</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 06" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_06&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 06</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 07" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_07&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 07</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 08" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_08&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 08</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 09" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_09&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 09</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 10" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_10&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 10</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 11" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_11&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 11</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 12" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_12&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 12</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 13" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_13&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 13</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 14" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_14&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 14</figcaption>
    </figure>
    <figure class="item">
        <img src="" alt="Row 04, col 15" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_04_col_15&amp;w=200&amp;h=200">
        <figcaption>Lorem ipsum 15</figcaption>
    </figure>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.