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.

score 0 · Answer 1 · answered Aug 14 '19 at 19:00

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.

I did not think about a solution like that. But i do wonder about one thing as my JS skills are subpar at best. Once i preloaded them how would i incorporate them inside my page? As the images i am loading in are actualy pulled threw a controller. — Pieter-Jan Casteels, Aug 14 '19 at 20:03
Actually, that's the job of the browser. You just have to put your images where you need them and pre-load them. The browser will realize the connection between the image you specify in an image tag with the image it's already loaded and put it there for you. That's how the browser caches images and pages locally to make reloading a page faster. This is one time when the answer is "It just works like that" is the correct answer. — computercarguy, Aug 14 '19 at 20:07
Sadly enough this solution will not work. The pages are build in codeigniter with seperation of head - body - footer. The data is send not to the header but to the body files. Meaning i can not use the onload function. Rebuilding the site to get this to work would take me weeks. I do however managed to get the images loaded with lazyload. But now i need to find a way to get the desandro masonry to reload the layout as soon as the images get loaded in :'( — Pieter-Jan Casteels, Aug 14 '19 at 21:35
Can you send the image names to the footer? As long as it's loaded into an array before the `onload` method runs, it shouldn't matter if it's in the `head` or `footer` tags. https://www.w3schools.com/tags/tag_footer.asp — computercarguy, Aug 14 '19 at 21:38
As far as i could see the onload is run in the body tag is it not? The body tag runs after header. — Pieter-Jan Casteels, Aug 15 '19 at 00:48
@Pieter-JanCasteels, the `body` tag, yes, the `onload` method it run, no. That runs only after the document is fully loaded. https://www.w3schools.com/tags/ev_onload.asp — computercarguy, Aug 15 '19 at 15:49

PHP not all images are showing

1 Answers1