Optimize jquery image load

Question

I have created an image manager and I am loading each url with jquery, however, when I change the 'src' attributes in the ajax request, the image takes several seconds to appear in the browser, I have tried to place a spinner and wait To show everything once the request loads, but still, if I check the 'src' attribute the url is already loaded, but not the image, I have also tried to solve this problem by placing my request inside the jquery load method, but neither do I Works, what can be done in these cases?

     $(window).on("load", function() {
       $.ajax({
                async:true,   
                cache:false, 
                dataType: 'json',
                type: 'get',  
                url: 'cargarBanner',
                success: function(data){
                     ajax_start();
                if (data.success==true)
                {
                   for(var i=0;i<data.banner.length;i++)
                {

                    switch(data.banner[i].banner_type)
                    {
                        case "encabezado":
                        $("#"+data.banner[i].banner_type+" img").attr('src',flagsUrl+"/"+data.banner[i].banner_image);
                        break;

                        case "bsq-superior":
                        $("#"+data.banner[i].banner_type+" img").attr('src',flagsUrl+"/"+data.banner[i].banner_image);
                        break;

                        case "bsq-inferior":
                        $("#"+data.banner[i].banner_type+" img").attr('src',flagsUrl+"/"+data.banner[i].banner_image);
                        break;
                    }



                }  
                }

                },
                complete: function(response) {
                    alert("listo");
               ajax_stop(); 
                    },
                //si ha ocurrido un error
                error: function(data){
                   alert("ha ocurrido un error") ;

                }
            });
    });`

****UPDATE**

I've changed my method to this way

public function cargarBannerT(Request $request)
    {
        $banner=$estados = DB::table("banners")->select('banner_image')->where('banner_type','=',$request->tipo)->get();
        if (count($banner)>0) {
            return $banner[0]->banner_image;

        }


    }

in this case, the method return the url of the image "1498501452.jpg", However, in the html, only plain text appears, and a broken image "src="../images/cargarBannerT?tipo=encabezado"

RDM · Answer 1 · 2017-06-28T19:48:29.863

1

As I can see, you are calling a service that returns your image URLs. Once you change the URLs, the browser still has to download the images from the new URL and show them.

I think your cargarBanner service should redirect to the image URL. Once you do it, you only have to call the service directly from your image source. Something like:

<img src="cargarBanner?param1=value1&param2=value2&..."/>

This way, the browser will call your service without having to do that ajax call

edited Jun 28 '17 at 19:48

answered Jun 28 '17 at 19:31

RDM

56
8

Hi, I have solved the method for it to work but it has not returned anything, It has recognized the text inside the src as a string and not as the name of the image – Felipe Castillo Jul 03 '17 at 19:01
I need you to describe your input parameters and output of your cargarBanner service to let me understand what is going on – RDM Jul 04 '17 at 09:11
I suppose $banner[0]->banner_image is a string. If that is true, that method should forward to that image url instead of returning that string. Take a look at this: https://stackoverflow.com/questions/768431/how-to-make-a-redirect-in-php – RDM Jul 05 '17 at 18:55
But even if I add ""../images/", it still does not work, do you think that's why? – Felipe Castillo Jul 05 '17 at 18:57
HTML tag expects in its "src" attribute a url returning an image, not a string. Your cargarBanner method should get from database the image URL and then redirect to it instead of returning the string. I think this should work: https://stackoverflow.com/questions/768431/how-to-make-a-redirect-in-php – RDM Jul 05 '17 at 19:00

Optimize jquery image load

1 Answers1