Not all images are showing - the ones missing have a height of 0px.

[EddyNCNL]

Hi,

I'm having issues trying to build my first website. I'd like to have multiple slider images - however, most of the time they are not showing all at once. When I load the webpage, some images are missing. When reloading or resizing the window the missing images will load and show correctly. (mostly in Chrome, but also seen in other browsers - but Chrome seems to be the worst)

The missing images seem to have a height of 0px

<div class="twentytwenty-container" style="height: 0px;"> <img src="img/14 Albany St 1.jpg" class="twentytwenty-before" style="clip: rect(0px, 0px, 0px, 0px);"> <img src="img/14 Albany St 2.jpg" class="twentytwenty-after" style="clip: rect(0px, 0px, 0px, 0px);"> <div class="twentytwenty-overlay"><div class="twentytwenty-before-label" data-content="Before"></div> <div class="twentytwenty-after-label" data-content="After"></div> </div> <div class="twentytwenty-handle" style="left: 0px;"><span class="twentytwenty-left-arrow"></span><span class="twentytwenty-right-arrow"></span> </div> </div>

My website

How can I fix this issue?
Thanks,
Eduard

[simias]

I'm having the same issue, I suspect that the problem has something to do with the images not yet being loaded when twentytwenty initializes which causes it to set the height to 0px. Resizing the browser later makes the images appear.

I still haven't figured out what needs to be done to solve this problem... If I do I'll update this issue.

[tmfksoft]

A work around I'm using for this is to use the onload listener for both images and set a var to true for each image.

When both are loaded I init TwentyTwenty.

TwentyTwenty could implement this or something similar.

[maxmeloni]

var imgLoaded = 0;
$('#image1')
  .on('load', function() { ++imgLoaded; checkAndRun(); })
  .on('error', function() { console.log("error loading image1"); })

$('#image2')
  .on('load', function() { ++imgLoaded; checkAndRun(); })
  .on('error', function() { console.log("error loading image2"); })

function checkAndRun() {
  $("#container1").twentytwenty();
}