2

Estou utilizando o lazyload para um projeto, ele carrega imagens progressivamente.

https://github.com/verlok/lazyload

Quando as imagens estão carregando, a classe "loading" entra em atividade na tag <img class="loading">...</img>

e quando termina de carregar, a classe loading é substituída pela classe "loaded"

Quero saber se seria possível adicionar uma classe numa div baseado na atividade da classe loading.

Fiz uma exemplo bastante rústico, só para demonstrar meu objetivo.

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

Alguém sabe como eu poderia fazer isso? Agradeço.

5
  • "adicionar uma classe numa div baseado na atividade da classe loading" - como assim ? Dê um exemplo concreto. E parece-me que isso é um problema XY. A sua ideia global desta solução é qual ?
    – Isac
    Commented 28/10/2017 às 14:15
  • Não vejo como poderia ser mais claro num caso desses, não imagino uma solução para esse problema, meu exemplo rústico foi apenas para demonstrar a situação. veja essa demo andreaverlicchi.eu/lazyload/demos/lazily_load_lazyLoad.html use o inspetor do navegador, você verá que a class "loading" entra em atividade enquanto está carregando as imagens, e quando termina é substituída pela class "loaded" o quero é adicionar uma class em outro elemento enquanto a classe loading estiver em atividade. Commented 28/10/2017 às 14:26
  • Mas está a tentar replicar a biblioteca de lazyloading que citou implementando à mão ? Ou quer apenas adicionar uma classe ao body se alguma imagem ainda está a carregar ? Tanto em jquery como em javascript puro tem o evento load que pode implementar para quando uma imagem carrega totalmente
    – Isac
    Commented 28/10/2017 às 14:29
  • Só quero apenas adicionar uma classe no body enquanto se alguma imagem ainda está a carregar! é apenas isso. Commented 28/10/2017 às 14:32
  • Eu não tenho uma ideia de como fazer isso. Por isso a pergunta. O exemplo na minha pergunta só foi para demonstrar o que preciso, não foi minha ideia de solução. Preciso adicionar uma classe no Body ou em uma div, enquanto a classe loading que aparece temporariamente enquanto as imagens estão carregando. Commented 28/10/2017 às 14:38

1 Resposta 1

1

Você pode fazer isso contando quantas imagens não possuem a class .loaded na div. Quando todas tiverem a classe, você faz o que deseja. No exemplo abaixo reduzi a quantidade de imagens para melhor demonstração:

// 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .