Question

I have been working on an image gallery in PHP and Javscript for a long time. The “selling point” of the gallery is that it pre-loads images so when you switch to the next image, you don’t have to reload the page and it is almost instantaneous.

The problem is that currently when you switch to a photo that has not been loaded, it loads every image before it. I want to load the image that should be currently showed to the viewer. But even when the console says the current image is loaded (console.log messages I set up), it does not switch until all the other photos before it have been loaded.

An example page in question.
I will put some of the most important code here because I don’t want to give all the code.

This function load_image adds the next photo to be loaded to the hidden_container. The problem is that when the current_photo has loaded, it is not changed. You can test this in the page by viewing the console and using the arrow keys to go all the way to the last photo.

    function load_image() {
    // find the next photo to load
    var next_to_load = next_photo_to_load();
    //stop condition:
    if (next_to_load == null)
        return false;

    if (img[current_photo]['loaded'] == 0) {
        console.log("current_photo: "+current_photo);
        next_to_load = current_photo;
        console.log("next_to_load: "+next_to_load)
    }
    else {
        console.log("*current_photo loaded*");
        $("main_img").src = img[current_photo]['img'];
    }

    img[next_to_load]['loaded'] = 1;
    var url = img[next_to_load]['img'];
    var image = new Image();
    image.src = url;
    image.onload = function() {
        load_image();
    };

    document.getElementById("hidden_container").appendChild(image);
}

Also, load_image is initially called when the first photo is loaded with this code. (I included this because it explains the extra console log).

img[current_photo]['loaded'] = 1;
console.log("loaded:"+current_photo);
load_image();

Thanks for reading all of this. I know it is long.

Answer 1

You can try something like this, I have used this in a mobile gallery I have recently developed.

var imageList = $('#imagelist');   //id of div tag
imageList.empty();
var imageFiles = '<?=$images_js?>';
imageFiles = $.parseJSON(imageFiles);  //convert to json for javascript readability

var images = [];
for(i = 0; i<imageFiles.length; i++){
    var image = document.createElement('img');
    image.src = imageFiles[i];
    images.push(image);
}

var count = imageFiles.length;
var i = 0;

imageList.append(images[i]);

You can see I have used a php variable within the javascript. I have done this so I can have the php file which is included with this javascript dynamically read the contents of the folder.

the php file is very small and consists of:

<?php

$imagesDir = 'gallery/img/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$images_js = json_encode($images);
?>

Here is the jquery in action:

$('#contentPlaylist').live('swipeleft swiperight',function(event){

    if (event.type == "swipeleft") {
        imageList.fadeOut('slow', function(){
            imageList.empty();

            if(i != 0){

                i--;
                imageList.append(images[i]);            
                imageList.fadeIn('slow');
            }


            else{
                i = count - 1;
                imageList.append(images[i]);            
                imageList.fadeIn('slow');

            }
        });
    }
    if (event.type == "swiperight") {
            imageList.fadeOut('slow', function(){
                imageList.empty();
                i++;        
                if(i < count){

                    imageList.append(images[i]);            
                    imageList.fadeIn('slow');
                }
                else{

                    imageList.append(images[0]);

                    imageList.fadeIn('slow');
                    var reset = 0;
                    i = reset;
                }
            });
    }