jQuery 如何在单击图像缩略图时显示图像加载器

Question

我为图像库编写了一个 jquery 代码，其中有 1 个大图像和 4 个小缩略图。点击小缩略图时需要在大图像上显示加载程序。

请检查以下工作代码。

  $('.img1 a').click(function(e){
                             var title = $(this).attr('title');
                              var y = 1; while(y <= 4) {

         if(title == "img"+y){
  e.preventDefault();
   $(".bg4").attr('src',"http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img"+y+".jpg").fadeIn();
    if(y == 1){
        $('.text-info4').text('Lion Park - South Africa');
    }
    if(y == 2){
        $('.text-info4').text('Bayworld - South Africa');
    }
    if(y == 3){
        $('.text-info4').text('Victoria Falls - South Africa ');
    }
    if(y == 4){
        $('.text-info4').text('South Africa Coach Holidays & Tours');
    }
         }

     y++; }
                              });

 <img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img1.jpg" class="bg4" alt="">

 <ul class="cs-thumb-list img1">
                            <li>
                                <a href="#" title="img1"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img1.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img2"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img2.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img3"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img3.jpg"
                                        alt=""></a>
                            </li>
                            <li>
                                <a href="#" title="img4"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/thumb-img4.jpg" alt=""></a>
                            </li>
                        </ul>

<script type='text/javascript' src='http://hmsholidays.fluidux.in/wp-content/themes/hmsHolidays/js/jquery.js'></script>

Answer 1

因为你的图片尺寸很小，即使你放了“正在加载”你也看不到它。

您可以使用超时来测试它 ( https://www.w3schools.com/jsref/met_win_settimeout.asp )

但是如果你想要一个真正的“onLoadImage -> ChangeImage”，请检查这个插件: https://github.com/alexanderdickson/waitForImages

对于加载状态，我使用很棒的字体。

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

请参阅本页中的示例:http://fontawesome.io/examples/

所以逻辑编程是:

onClickImage
{
    ActualImage.Hide
    LoadingIco.Show

    SetTimeOut(2 seconds) //for development, but change for WaitForImages() plugin function
    {
        LoadingIco.Hide
        ClickedImage.Show 
    }
}

要使 fontAwesome 图标居中，请使用基本 CSS:

#ParentOfTheIco{
    display: block;
    width: 100%; //Any width
    margin: 0 auto;
}

#parent{
border:1px solid black;
height: 20px;
padding: 20px;
}
#loading_ico{
border:1px solid red;
height: 20px;
width: 20px;
margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="loading_ico">
    
  </div>
</div>