Optimiser la charge de l'image jquery

Question

J'ai créé un gestionnaire d'image et je charge chaque URL avec jquery, cependant, quand je change les attributs 'src' dans la requête ajax, l'image prend plusieurs secondes pour apparaître dans le navigateur, j'ai essayé de placer un spinner et d'attendre Pour montrer tout une fois la requête chargée, mais quand même, si je vérifie l'attribut 'src' l'url est déjà chargé, mais pas l'image, j'ai aussi essayé de résoudre ce problème en plaçant ma requête la méthode de chargement jquery, mais je ne travaille pas non plus, que peut-on faire dans ces cas?

 $(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") ; 

       } 
      }); 
    });` 

**** MISE A JOUR **

J'ai changé ma méthode de cette façon

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; 

     } 


    } 

dans ce cas, la méthode renvoie l'URL de l'image « 1498501452.jpg " Cependant, dans le html, seul le texte brut apparaît, et une image cassée "src =" images ..//cargarBannerT? tipo = encabezado"

Answer 1

comme je le vois, vous êtes vocation Service qui renvoie vos URL d'image. Une fois que vous avez modifié les URL, le navigateur doit télécharger les images de la nouvelle URL et les afficher.

Je pense que le service cargarBanner devrait rediriger vers l'URL de l'image. Une fois que vous le faites, vous devez seulement appeler le service directement à partir de votre source d'image. Quelque chose comme:

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

De cette façon, le navigateur appeler votre service sans avoir à faire appel ajax