// 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&txt=row_03_col_01&w=200&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&txt=row_03_col_02&w=200&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&txt=row_03_col_03&w=200&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&txt=row_03_col_04&w=200&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&txt=row_03_col_05&w=200&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&txt=row_03_col_06&w=200&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&txt=row_03_col_07&w=200&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&txt=row_03_col_08&w=200&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&txt=row_03_col_09&w=200&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&txt=row_03_col_10&w=200&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&txt=row_03_col_11&w=200&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&txt=row_03_col_12&w=200&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&txt=row_03_col_13&w=200&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&txt=row_03_col_14&w=200&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&txt=row_03_col_15&w=200&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&txt=row_04_col_01&w=200&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&txt=row_04_col_02&w=200&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&txt=row_04_col_03&w=200&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&txt=row_04_col_04&w=200&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&txt=row_04_col_05&w=200&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&txt=row_04_col_06&w=200&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&txt=row_04_col_07&w=200&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&txt=row_04_col_08&w=200&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&txt=row_04_col_09&w=200&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&txt=row_04_col_10&w=200&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&txt=row_04_col_11&w=200&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&txt=row_04_col_12&w=200&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&txt=row_04_col_13&w=200&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&txt=row_04_col_14&w=200&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&txt=row_04_col_15&w=200&h=200">
<figcaption>Lorem ipsum 15</figcaption>
</figure>
</div>
load
que pode implementar para quando uma imagem carrega totalmente