NoPreload for carousel

by Petr Haluza

HTML

<div class="box-image owl-carousel-list owl-carousel owl-theme owl-loaded">

			<div class="owl-stage-outer"><div class="owl-stage" data-nic="transform: translate3d(-1056px, 0px, 0px); transition: all 0.5s ease 0s; width: 2112px;">
      
      <div class="owl-item"><a href="#" title=""><img src="https://www.img4.cz/www/img/img?attid=1628474"></a></div>
      <div class="owl-item"><a href="#" title=""><img data-src="https://www.img4.cz/www/img/img?attid=1628473"></a></div>
      <div class="owl-item"><a href="#" title=""><img data-src="https://www.img4.cz/www/img/img?attid=1628474"></a></div>
      <div class="owl-item"><a href="#" title=""><img data-src="https://www.img4.cz/www/img/img?attid=1628475"></a></div>
</div>
</div>
<div class="owl-controls"><div class="owl-nav"><div class="owl-prev" data-nic="">prev</div><div class="owl-next" data-nic="">next</div></div><div data-nic="display: none;" class="owl-dots"></div></div></div>

CSS

body {
    text-align: center;
    left: 50%;
    right: 50%;
    margin: 20px;
}

.preloading {border:2px solid red;}
img {background:red;}

JavaScript

$(".owl-controls").click(
   	function () {
		var carousel = $(this).parent('.owl-carousel');
    var deferreds = [];
    var imgs = $(this).parent('.owl-carousel', this).find('img');
    // projit vsecky obrazky a zmenit data-src na src
    imgs.each(function(){
        var self = $(this);
        var datasrc = self.attr('data-src');
        if (datasrc) {
            var d = $.Deferred();
            self.one('load', d.resolve)
                .attr("src", datasrc)
                .attr('data-src', '');
            deferreds.push(d.promise());
        }
    });
	}            
);