PHP not all images are showing

Question

When the gallery is loaded not all images are showing up. It is random. Meaning that sometimes the pages shows image 5 and the next it does not. It only happens when a lot of images need to get loaded.

I work with codeigniter and the images are stored outside of the htdocs folder. So therefore I work with a img controller to load in the images.

I only recently noticed this issue because it is the first time I need to load in 500+ images. So I presume it has something to do with the number of images the site needs to process.

IMG controller

public function jpg($foldername, $file)
    {
        if(($foldername != null) && ($file != null))
        {
            $filename = basename($file);
            $file_extension = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

            switch($file_extension) 
            {
                case "gif": $contentType="image/gif"; break;
                case "png": $contentType="image/png"; break;
                case "jpeg": $contentType="image/jpeg"; break;
                case "jpg": $contentType="image/jpeg"; break;
                default:
            }

            $path = DOCROOT . GALLERYS . $foldername . '/' . $file;
            header('Content-type: ' . $contentType);
            readfile($path);
        }      
    }

Example of the code beeing used. It is used in a foreach but as it is kinda complex I will just show this.

$imageLocation = 'img/jpg/' . $folderName . '/' . $img['image_name']; 
$id = $selected_gallery . $counter;
<img src="<?php echo base_url($imageLocation); ?>" alt="<?php echo $selected_gallery . ' ' . $counter; ?>">

I am looking for a solution so I can be sure it is all loaded in correctly.

Answer 1

I've worked on an image gallery many years ago, and the order the images are loaded is absolutely crucial to the gallery, and the browser doesn't know the order you need, so it loads them semi-randomly, or at least seemingly randomly. It may be that the issue you are seeing is just that it hasn't gotten to downloading your image yet, rather than never downloading it.

What you need is to pre-load your images in the order your user is likely to view them. If it's just a flat table that scrolls down your page is a little different than if you are showing them 1 image at a time, but it's a minimal difference.

This will have to be done in the browser, so you're looking for JavaScript, rather than a PHP solution. Your PHP will need to supply the image paths to the browser in the order the images should be displayed, though, and it'll likely have to be in a JavaScript array.

Going off the related Question here I'm going to suggest something similar to this:

<script type="text/javascript">
    // created by your PHP code, or could be POST/GET using AJAX, but would be slightly delayed
    var imagePathArray = [
        "..\images\image1.png",
        "..\images\image12.gif",
        "..\images\image31.svg",
        "..\images\image3.jpg"
    ];

    var imageArray = [];

    function PreloadImages(){
        for (var i = 0; i < imagePathArray.length; i++){
            var img = new Image();
            img.src = imagePathArray[i];
            imageArray.push(img);
        }
    }
</script>
...
<body onload="PreloadImages()">
...

(You can substitute you favorite loop, that's not what's important.)

What this does is start loading the images in the order you want and keeps a reference to the image, so the browser doesn't clear it's cache after a few seconds. You can try it without the imageArray variable if you want, since the disk cache should still have the image to reference, but a comment seemed to suggest that the browser would release it from memory and your pre-load would have been for nothing. It's been probably 10 years since I've worked on this project, so I don't remember how it all works, not to mention that browsers work significantly different since then.

For the slide show, you really only need to pre-load the images 1-5 places around the currently viewed image. Here, you can change the signature of the PreloadImages() to include a start and stop index for the array and change the start and stop indexes for the loop. You might also want to keep track of what's already pre-loaded so you don't load an image already loaded.

PHP not all images are showing

Question

1 answers

solution1
0 2019-08-14 19:00:22

PHP not all images are showing

Question

1 answers

solution1 0 2019-08-14 19:00:22

solution1
0 2019-08-14 19:00:22