Question

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

请查看以下工作代码。

＆＃13;

  $('.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++; }
                              });

＆＃13;

 <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>

＆＃13;

Answer 1

因为您的图像尺寸较小，即使您进行了“加载”也无法看到它。

您可以使用超时（https://www.w3schools.com/jsref/met_win_settimeout.asp）

进行测试

但是如果你想要一个真正的“onLoadImage - ＆gt; 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>

Answer 2

你可以简单地添加隐藏的gif img并用缩略图显示它然后在大图像就绪时隐藏

$("#loader").show();

$("#bigImage").ready(function(){
  $("#hide").show();
});

并将其放置为一些css样式，如

#loader{
  //According to your style
  position:absolute;
  top:10%;
  left:50%;
}

Answer 3

＆＃13;

$(document).ready(function(){
	$('.img1 a').click(function(e){
		$(".loading_img").show();
		
		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++; 
		}
		setTimeout(function() { $(".loading_img").hide(); }, 2000);
	});
})

＆＃13;

.loading_img {
		display:none;
	}
	
	.main_img{
		position:relative;
	}
	.loader {
		background-color: transparent;
		left: 23%;
		position: absolute;
		top: 23%;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main_container">
	<div class="main_img"><img src="http://hmsholidays.fluidux.in/wp-content/uploads/world/big-img1.jpg" class="bg4" alt=""></div>
	<div class="loader"><img src="http://chimplyimage.appspot.com/images/samples/classic-spinner/animatedCircle.gif" class="loading_img" alt=""></div>
</div>

 <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>

＆＃13;

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

3 个答案: