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

Question

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

Navigation

#1 by (1 votes)

2

I'm using lazyload for a project, it loads images progressively.

link

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

and when you finish loading, the loading class is replaced by the loaded class

I want to know if it would be possible to add a class to 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 this? Thanks.

javascript jquery

asked by anonymous 28.10.2017 / 15:59

1 answer

Warning: array_keys () expects parameter 1 to be array, null given in [closed] How to put string and variables together in Portuguese?

score 1 · Accepted Answer

You can do this by counting how many images do not have the class .loaded in div . When everyone has 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><divclass="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>Loremipsum01</figcaption></figure><figureclass="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>Loremipsum02</figcaption></figure><figureclass="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>Loremipsum03</figcaption></figure><figureclass="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>Loremipsum04</figcaption></figure><figureclass="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>Loremipsum05</figcaption></figure><figureclass="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>Loremipsum06</figcaption></figure><figureclass="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>Loremipsum07</figcaption></figure><figureclass="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>Loremipsum08</figcaption></figure><figureclass="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>Loremipsum09</figcaption></figure><figureclass="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>Loremipsum10</figcaption></figure><figureclass="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>Loremipsum11</figcaption></figure><figureclass="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>Loremipsum12</figcaption></figure><figureclass="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>Loremipsum13</figcaption></figure><figureclass="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>Loremipsum14</figcaption></figure><figureclass="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>Loremipsum15</figcaption></figure></div><divclass="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>Loremipsum01</figcaption></figure><figureclass="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>Loremipsum02</figcaption></figure><figureclass="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>Loremipsum03</figcaption></figure><figureclass="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>Loremipsum04</figcaption></figure><figureclass="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>Loremipsum05</figcaption></figure><figureclass="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>Loremipsum06</figcaption></figure><figureclass="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>Loremipsum07</figcaption></figure><figureclass="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>Loremipsum08</figcaption></figure><figureclass="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>Loremipsum09</figcaption></figure><figureclass="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>Loremipsum10</figcaption></figure><figureclass="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>Loremipsum11</figcaption></figure><figureclass="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>Loremipsum12</figcaption></figure><figureclass="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>Loremipsum13</figcaption></figure><figureclass="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>Loremipsum14</figcaption></figure><figureclass="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>