Image loading not nice
  • Hi everyone,

    I really like minishowcase and even added very simple user-support (yet only password protection for the whole gallery).

    But there is a issue which I don't like: When using the standard-lightbox for displaying the images, the whole image is shown at the same moment in ie (which looks nice, although switching from one image to another is nicer in slimbox) but in firefox, first there is a missing image box
    (like this Free Image Hosting at www.ImageShack.us)
    and then the image is loaded slowly from top to bottom
    (like this Free Image Hosting at www.ImageShack.us)

    Has anybody else discovered this problem? I would just use slimbox, but slimbox doesn't resize the images to the window size if they are too big (which I really like).

    Thanks and greetings from Germany,
    Fillip

    Edit: edited the images for privacy reasons
  • no idea victor? should be like this in every firefox and every gallery...
  • i think that happens because you have
    $settings['create_thumbnails']
    set to
    false
    , so images are downloaded when presented. if you set it to
    true
    then it might improve the experience.

    anyway that is the standard jpeg downloading visualisation, as you'll notice it also happens in mostly every other site.
  • no, i haven't...

    and yes, this might be the standard firefox jpeg downloading visualisation, but slimbox and thickbox go around it someway which makes the switching from one image to another much nicer. i think it is because you replace the "loading image" with the real image before the image is really loaded...
  • I think I found the source of this: you simply set a new source of the image instead of loading and replacing it via an AJAX request. so the image is loaded after you replaced the loading image with the new img tag, am I right?

    if (resized_img && create_thumbnails) {
    //// enlarge message on top
    //imgout += '<p><a href="'+escapedImg+'"
    target="_blank"><small>'+lang['alert_enlarge']
    +'</small></a></p>';

    var targetLink = escapedImg

    imgout += '<a href="'+targetLink+'" target="_blank">';
    imgout += '<img id="mainimg" class="imagen" src="';

    if (scale_big_images) {
    imgout += base_url+'libraries/thumb.display.php?';
    imgout += 'max='+img_maxsize
    +'&q='+large_image_quality
    +'&img='+escapedImg;
    } else {
    imgout += base_url+escapedImg;
    }

    imgout += '" width="'+fw+'" height="'+fh+'"';
    imgout += ' title="'+name+'" alt="'+name+'" />';
    imgout += '</a>';

    //// enlarge message at bottom
    imgout += '<p><a href="'+escapedImg+'"
    target="_blank"><small>'+lang['alert_enlarge']
    +'</small></a></p>';

    } else {
    imgout = '<img id="mainimg" class="imagen" src="'
    +escapedImg+'" width="'+fw+'" height="'+fh+'" title="'
    +name+'" alt="'+name+'" />';

    }
  • slimbox, thickbox and lightbox go around it by downloading all the image before presenting it. it might add beauty (according to some) but it adds unattended waiting time, a situation i prefer to avoid.

    anyway, i'll check it.
  • by the way, in my preview mode, some very big images (bigger than the viewport == the inner window rectangle) are resized with GD+PHP, so i cannot load those with JavaScript. those might be the ones that give you problems.

    the other lightboxes (slimbox, thickbox and lightbox) don't manipulate the image, they present the full-sized version, which takes longer to load but looks better to you while downloading.

    i personally prefer lighter images (and therefore faster downloads) even if they show that they're downloading; it is better for the user that does not have to wait excessively.
  • yep, i pfrefer that too and use your preview mode. that's why i asked... thanks anyway.
  • thanks to you filip. it is your input, no matter the output, that makes minishowcase better. we all need to think on things now and then.

    i'll try to find a time to tinker about it, and then i'll let you (all) know what i think of it.

    btw, the more of you that come with a need and let it down here, the more i'll think of it. after all, this is a community. i have my opinions, but they're not iron-clad!
  • i checked the possibility of preloading the image, but unfortunately, as my preview pane tinkers with it through php, the only mode is to save the image as a file and then preload it, which will add (and perhaps double) the overall loading time, so i will leave it as it is.

    if anyone prefers the preloaded images, there's always slimbox, thickbox and lightbox

    cheers