CODEWITHSUNDEEP
phpjqueryajax
Vayas
Vayas

Reputation: 213

How display images on each iteration (ajax)

please help to resolve the following issues:
There is a page which loads the image.
50 pictures.
How to make, that images would be displayed gradually (example google photo)?

$(document).ready(function(){
        $.ajax({
            type: 'POST',
            url: document.location.href,
            dataType: 'html',
            data: {'ajax-query': 'true'}
            success: function(data){
                $('#divgallery').append(data);
            }
        });
    })

Here comes the server code

    if($i=0; $i<50;$i++){   echo '<img src="/img/' . $img . '">';   }

They are displayed all at once, after the server-side code is done.
How display images on each iteration?
Any tips, link or code example would be useful.

Upvotes: 1

Views: 65

Answers (1)

XCS
XCS

Reputation: 28147

Firstly, on the server site return the image links in such way that they can be retrieved individually. I recommend JSON fromat.

$res = array();
if($i=0; $i<50;$i++){  $res[] = '<img src="/img/' . $img . '">';   }
echo json_encode($res);

Secondly, after you get the data you have to add the images one by one, but with a delay between the additions.

       success: function(data){
            delayAppend($("#divgallery"), data, 0);
        }

And the delayAppend function would be something like:

function delayAppend($div, data, index){
   if(index >= data.length)
      return;

   $div.append(data[index]);
   setTimeout(function(){ delayAppend($div, data, index+1); }, 500);
}

Here is a demo of the delayAppend function: http://jsfiddle.net/s7Q8W/

Note: Code not fully tested.

Upvotes: 1

Related Questions