使用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.

Answer 1

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?

Answer 2

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.