CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
Pontus Endlessmind Holmberg
Pontus Endlessmind Holmberg

Reputation: 157

Dynamically created img not showing src image in Chrome unless style is changed

I'm using the image picker to show images on the server. I've combined that with the modal popup box example.

On document ready I get content for the selector from a php-script. So it's just a for each image in a folder on my server.

This all works fine in all the browsers I tested, as long as I change the dialogs display style to block via a button-click. If I change it programmatically after the content has been loaded, the images will not be visible on Chrome.

I'm using this to show the popup:

$('#myModal').css("display", "block");

In FireFox it works, but in Chrome I just get the borders. Looking at the network tab in the debugger I can see that the images are loaded. And doing any visible change to the style will show the images.

This as to do with Chrome not rendering until the images are loaded or something similar, I suppose. But what can I do to fix this?

I'm adding the ability to upload files with the same dialog, and want to update the image picker as soon as the new images are uploaded. I get the same issue here, the first described methods to reproduce this is just simpler and faster to do.

Upvotes: 2

Views: 558

Answers (1)

Pontus Endlessmind Holmberg
Pontus Endlessmind Holmberg

Reputation: 157

This issue was solved using the imagesloaded library and a force redraw.

     $('.image_picker_selector').imagesLoaded(function () {
        document.getElementById('modalImgSelector').style.display = "none";
        document.getElementById('modalImgSelector').offsetHeight; //Only ref needed
        document.getElementById('modalImgSelector').style.display = "block";
    });

This forces a redraw when all the images are loaded. It's not the best solution maybe, but it works without showing any flickering or anything.

Upvotes: 1

Related Questions