How to preload images for simplemodal?

Question

It seems that, unless the image it displays is already loaded, simplemodal won't resize to encompass the image. I've tried to preload the image, setContainerDimensions() and update() but I'm too inexperienced with jQuery to implement these possible fixes correctly. I know others have had similar issues but I'm sure it's nothing wrong with simlemodal, which is great.

jQuery(function ($) {
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal({
        overlayClose:true,
        autoResize:true,
        minHeight:400,
        minWidth: 600, 
    });// end of modal.
    $.modal.setContainerDimensions();//seems to do nothing here :(
    return false;
});// end of basic modal on click.
});// end of jQuery function.

Thanks Tino. Makes my code tidier but does not resolve the issue. — runninghead, Mar 09 '14 at 15:30

score 0 · Answer 1 · answered Aug 02 '23 at 22:47

If the resulting image size is known beforehand, a workaround would be to:

Add a temporary src to the img tag, and set it to data/image of a transparent gif. Like this answer suggests Smallest data URI image possible for a transparent image
Set explicit width-height for the image tag

Result is:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" id="myImg" />

This way you get a pre-sized box, and you can later swap the image source to your dynamically loaded image

$("#myImg").src("image-url");

How to preload images for simplemodal?

1 Answers1