simulating protoio page changing to check flashing in safari

by annam

HTML

<div style="background-image: url('http://www.teasmade.se/wp-content/uploads/photo-gallery/storm_in_a_teacup_6weeks_thumb.jpg')" class="puppy active"></div>
<div style="background-image: url('http://guidetopuppies.com/wp-content/uploads/2016/01/German-Shepherd-puppies-3.jpg')" class="puppy"></div>
<div style="background-image: url('https://www.marshallspetzone.com/blog/wp-content/uploads/2017/03/Rottweiler-food.jpg')" class="puppy"></div>
<div style="background-image: url('http://riotfest.org/wp-content/uploads/2016/06/cute-puppies-pictures-1.jpg')" class="puppy"></div>
<div style="background-image: url('https://orthoservices.com/wp-content/uploads/2014/07/beagle-sq.jpg')" class="puppy"></div>
<div style="background-image: url('https://www.guidedogs.com.au/sites/default/files/styles/metatag/public/node/news/image/guide_dog_puppies_-_web.jpg?itok=2dOQDWLn')" class="puppy"></div>

CSS

.puppy {
  width: 600px;
  height: 600px;
  display: none;
  background-size: contain;
  transform: translate(0,0);
  -w1ebkit-backface-visibility: visible;
}

.puppy.active {
  display: block;
}

JavaScript

$('.puppy').click(function(){
	$('.puppy').removeClass('active');
  
  if($(this).next('.puppy').length !== 0)
		$(this).next('.puppy').addClass('active');
  else
  	$('.puppy').first().addClass('active')
})

const imgs = [
  'http://www.teasmade.se/wp-content/uploads/photo-gallery/storm_in_a_teacup_6weeks_thumb.jpg',
  'http://guidetopuppies.com/wp-content/uploads/2016/01/German-Shepherd-puppies-3.jpg',
  'https://www.marshallspetzone.com/blog/wp-content/uploads/2017/03/Rottweiler-food.jpg',
  'http://riotfest.org/wp-content/uploads/2016/06/cute-puppies-pictures-1.jpg',
  'https://orthoservices.com/wp-content/uploads/2014/07/beagle-sq.jpg',
  'https://www.guidedogs.com.au/sites/default/files/styles/metatag/public/node/news/image/guide_dog_puppies_-_web.jpg?itok=2dOQDWLn'
];

let loadedImgs = 0;

imgs.map((el) => {
  $('<img>')
    .bind("load error", function() {
      loadedImgs++;
      console.log(loadedImgs)
    })
    .attr('src', el);
});