Loading images asynchronously with Laravel/jquery

Question

I have a bunch of images in a folder and I have the following doubts: What should I return from Laravel action? How to display some text while the images are loading on the client?

Normally I include in my question some code I've tried but I don't even know how to start. Google doesn't help much because the keywords "image" and "ajax" leads to uploading not downloading issues.

you probably need just 'load' event, something like 'img.addEventListener('load', showImage)` it should just hide text in image container and show image. about async - images loaded async by default — zb', Mar 25 '17 at 17:23

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

you can do something like this:

HTML

<div id="loadingDiv"><p>i'm loading...</p></div>

JS

var $loading = $('#loadingDiv').hide();

$(document)
  .ajaxStart(function () {
     $loading.show();
   })
   .ajaxStop(function () {
     $loading.hide();
   });


// your ajax calls

more infos here: How to show loading spinner in jQuery?

edited May 23 '17 at 11:54

Community

1
1

answered Mar 25 '17 at 17:34

Paolo

654
7
21

score 0 · Accepted Answer · answered Mar 25 '17 at 17:37

I would suggest you sending back a JSON response. The Controller's method would find the right image names/relative paths and return all that set packaged in a JSON response. You can add any other information along too.

return response()->json([
      'images' => <image-array-set>,
      'something_else' => $something_else_here
]);

Then in your client side/Javascript you'd parse this information and load the images accordingly, and do anything else you want in the process.

Loading images asynchronously with Laravel/jquery

2 Answers2