Question

我的图像是通过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);

                    });

      }

Answer 1

在行动之前把它放在

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

Answer 2

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

Html

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

使用加载程序gif设置所有img标记src，当您从db获取映像时，可以更新src。直到然后才会显示装载机。

如何装入装载机直到没有加载图像

2 个答案: