Load all images at once in a for-each loop for laravel

Question

I have a code for Laravel Blade that gets all images from a certain folder and shows it on the View like so:

@php
    $files = glob('storage/assets/images/seasons/*.*');
    for($i = 0; $i < count($files); $i++){
        $image = $files[$i];
        echo "<img src = $image>";
    }
@endphp

However, looking at the console, it shows requests like

/storage/assets/images/seasons/1.png
/storage/assets/images/seasons/2.png
/storage/assets/images/seasons/3.png
/storage/assets/images/seasons/4.png

around ~0.01 seconds after the other, resulting in one image loading after the other, not simultaneous loading/request. How would I achieve that in Laravel?

score 3 · Accepted Answer · answered Nov 03 '19 at 12:57

Laravel has got nothing to do with how the browser loads the images. The blade template is converted to an HTML document and send to the client as a response. So the client browser will get the whole HTML document just like any other static HTML page. It is the browser that's sequentially requesting for the image files one after the other.

For asynchronous image loading you have to use javascript.

Please refer this Stackoverflow answer to know more about asynchrnous image loading https://stackoverflow.com/a/37411977/5130011

Load all images at once in a for-each loop for laravel

1 Answers1