loading large images page load time

Question

I've tried a couple of ways to do this and have found issues with both.

Loading the image from a ajax post, and updating an img id source to it.
PHP function that loads all images in a "li" list with a class set to display:none and with jquery hide/show the image.

My problem is that these images are 1440px x 960px minimum. So if I load with ajax post it takes a while to show the full image, and if I load with php loop it takes a veryyyy long time for the page to load.

Here is my example of my php loop function:

public function LoadStreamImages()
{
    $imgs = '<li id="0"><img src="img/OM.jpg" class="bgimg" /></li>';
    if($db->num_rows($consulta)>0)
    {
        while($row = $db->fetch_array($consulta)) { 
            $imgs .= '<li id="' . $row['id'] . '" class="hidden"><img src="img/' . $row['imagefile'] . '" class="bgimg" /></li>';
        }
    }   

    echo $imgs;
}

anything I can do to spead this up?

fully discussed here http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image — Danilo Kobold, Feb 09 '13 at 01:25
not quite sure how that pertains to loading multiple(600) large images at once, if u could show me an example or tell me which is the best way to go it would be helpful..not looking for answers just good advice :) — Andres, Feb 09 '13 at 01:28

score 0 · Accepted Answer · answered Feb 09 '13 at 01:37

0

I'd guess your best solution is between the methods. send the image information thru php but load em with javascript after the page load....

<?php
public function LoadStreamImages(){

    if($db->num_rows($consulta)>0)
    {
        $i =0;
        $imgs = array();    
        while($row = $db->fetch_array($consulta)) { 
            $imgs[$i]['id'] = $row['id'];
            $imgs[$i]['imagefile'] = $row['imagefile'];
            $i++;
        }
    }   

echo "<script>myImages = ".json_encode($imgs).";</script>";
}
?>

and run a foreach with javascript after the page load on myImages just inserting the <li>s and <img>s tags.

answered Feb 09 '13 at 01:37

Danilo Kobold

2,562
1
21
31

this worked, but i had to go with loading one image at a time, cause they are just too large and was tying up the page from loading :( but thanks anyways – Andres Feb 12 '13 at 07:39
add a onload on each image so when one is loaded the others tarts – Danilo Kobold Feb 12 '13 at 13:24

score 0 · Answer 2 · answered Feb 09 '13 at 02:38

You could load a thumbnail and stretch it to the size of the large image, it would serve as a blurry placeholder until the full size image was available. Fade out the low res image to show the full image underneath. This is assuming that there is an easy way to tell when an image has loaded.

loading large images page load time

2 Answers2