优化jquery图片加载

Question

我已经创建了一个图像管理器，并且我正在使用 jquery 加载每个 url，但是，当我更改 ajax 请求中的“src”属性时，图像需要几秒钟才能出现在浏览器中，我试图放置一个微调器并等待一旦请求加载就显示所有内容，但是，如果我检查 'src' 属性，则 url 已经加载，而不是图像，我还尝试通过将我的请求放在 jquery 加载方法中来解决这个问题，但我也不工作，在这些情况下可以做什么？

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

                }
            });
    });`

****更新**

我已经把我的方法改成了这种方式

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;

        }


    }

在这种情况下，该方法返回图像“1498501452.jpg”的url， 但是，在 html 中，只出现纯文本，并且图像损坏 "src="../images/cargarBannerT?tipo=encabezado"

Answer 1

如我所见，您正在调用一个返回图片 URL 的服务。更改 URL 后，浏览器仍然需要从新 URL 下载图像并显示它们。

我认为您的 cargarBanner 服务应该重定向到图片 URL。一旦你这样做了，你只需要直接从你的图像源调用服务。比如：

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

这样，浏览器将调用您的服务，而无需进行 ajax 调用