如何放置加载器，直到未加载图像答案

【问题标题】：how to put a loader until the images are not loaded如何放置加载器，直到未加载图像
【发布时间】：2014-05-07 11:19:12
【问题描述】：

我的图片是通过 JSON 从数据库加载的，所以加载需要时间。我想要的是放置一个加载器，它会在图像加载完成时移除。

此代码可以正常工作，但如果有人继续单击下一个或上一个则它工作正常，但如果用户单击下一个然后上一个或随机它不会删除加载程序图像。奇怪的行为是图像更改不受此唯一加载程序的影响，不会被删除。下面给出的是我的 HTML 结构和 JavaScript：

<table cellpadding="0" cellspacing="0" border="0" width="815" align="center">
            <tr>
              <td><div class="btnPrv2" id="btnPrv2">&lt;</div></td>           
              <td><div class="slider">
                    <div class="mc3" id="mc3" ><img src="" class="ff3" /><img src="" class="fs3 loader" /></div>
                    <div class="mc4" id="mc4" ><img src="" class="ff4" /><img src="" class="fs4 loader" /></div>
                  </div>
              </td>           
              <td><div class="btnNxt2" id="btnNxt2">&gt;</div></td>           
            </tr>
          </table>


  <script>

          var npos=wpos=0,curwdiv = 3, totppl = relghm.length,canAnim = true,pos=0,cdiv=3, mcount=0;

         $(document).on("click","#btnNxt2",function(){

                if(wpos === totppl-1){  wpos = -1;}
                curP=0;
                if (wpos < totppl-1 && canAnim) {
                    wpos++; canAnim = false;
                    pos = wpos;

                    var hdiv = (curwdiv === 3) ? 4 : 3; 
                    $(".fs" + hdiv).attr("src","img/loader.gif");
                    $(".fs" + hdiv).css("display","block");

                    $(".ff" + hdiv).attr("src","./img/cms/" + relghm[wpos].image);
                    $(".ff" + hdiv).attr("alt", relghm[wpos].title);
                    $(".ff" + hdiv).attr("width", "782px");
                    $(".ff" + hdiv).attr("height", "441px");
                    $(".ff" + hdiv).attr("title", relghm[wpos].title);


                    $(".ff" + hdiv).load(function(){
                     console.log("image loaded");
                     $(".ff" + hdiv).css("display","block");
                     $(".fs" + hdiv).fadeOut(1000);

                    });


                    $(".mc" + hdiv).css({"left":782});

                    $(function(){
                      $(".mc3").animate({left:"-=782px" },450);
                      $(".mc4").animate({left:"-=782px" },450, function(){ curwdiv = hdiv; canAnim = true; });
                    });

                    cdiv = hdiv;


                    //if (wpos === totppl-1) { $("#btnNxt2").removeClass("btnNxt2").addClass("btnNxtG");  }


                }
                 curP=0;
            });

          $(document).on("click","#btnPrv2",function(){

                curP=0;
                if( wpos === 0){wpos = totppl}
                if (wpos >= 0 && canAnim ) {
                    wpos--; canAnim = false;
                    pos = wpos;

                    var hdiv = (curwdiv === 3) ? 4 : 3; 

                    $(".fs" + hdiv).attr("src","img/loader.gif");
                    $(".fs" + hdiv).css("display","block");


                    $(".ff" + hdiv).attr("src","./img/cms/" + relghm[wpos].image);
                    $(".ff" + hdiv).attr("alt", relghm[wpos].title);
                    $(".ff" + hdiv).attr("title", relghm[wpos].title);
                    $(".ff" + hdiv).attr("width", "782px");
                    $(".ff" + hdiv).attr("height", "441px");

                    $(".ff" + hdiv).load(function(){
                      $(".ff" + hdiv).css("display","block");
                      $(".fs" + hdiv).fadeOut(1000);

                    });

                    $(".mc" + hdiv).css({"left":-782});

                    $(function(){

                      $(".mc3").animate({left:"+=782px" },450, function(){});
                      $(".mc4").animate({left:"+=782px" },450, function(){ curwdiv = hdiv; canAnim = true; });
                    });

                    cdiv = hdiv;

                    //if (wpos === 0){ $("#btnPrv2").removeClass("btnPrv2").addClass("btnNxtG"); }

                }
                 curP=0;
            });

          var updCont = function(p,c) {
         // console.log("isset"+p);
          //console.log("div"+c);

            $(".fs" + c).attr("src","./img/loader.gif");
            $(".fs" + c).css("display","block");
            $(".ff" + c).attr("src","./img/cms/" + relghm[p].image);
            $(".ff" + c).attr("title",relghm[p].title);
            $(".ff" + c).attr("alt",relghm[p].title);
            wpos = p;

            $(".ff" + c).load(function(){

                     $(".ff" + c).css("display","block");
                     $(".fs" + c).fadeOut(1000);

                    });

      }

【问题讨论】：

我不认为你会得到帮助，如果你不组织你的代码，请在询问之前尝试检查问题！
感谢您的建议，但经过长时间研究我的代码后，我无法找出为什么会出现此错误

标签： jquery html loader

【解决方案1】：

把它放在行动之前

$('#div').html('<img src="loader.png">');

【讨论】：

在这个$(document).on("click","#btnNxt2",function(){下面可以放loader

【解决方案2】：

这个怎么样 - http://jsfiddle.net/4WhQc/

HTML

<img id="test" src="loading.gif" />

使用加载器 gif 设置所有 img 标签 src，当您从数据库中获取图像时，您可以更新 src。直到那时加载器才会显示出来。

【讨论】：