【问题标题】:Show Loading Gif While Full Image Loading加载完整图像时显示加载 Gif
【发布时间】:2015-09-09 04:43:24
【问题描述】:

所以基本上我需要

$("img#icon").click(function() {

//开始加载FullImg和FadeIn加载gif

// 在加载完整图像时,如下所示获取其高度

$("img#FullImg").load(function(){
  var imgHeight = $(this).height();
});

// FullImg加载时,FadeOut Gif然后动画块和FadeIn FullImg

    $("#block").animate({
        height: '+='ImgHeight
    },
    function() {
        $("img#FullImg").fadeIn("slow");
    });

}

我需要某种 AJAX 吗?

【问题讨论】:

标签: jquery ajax


【解决方案1】:

jquery.ajax 只接受 xml、html、脚本、纯文本和 json 数据类型。

dataType (default: Intelligent Guess (xml, json, script, or html))

参考:http://api.jquery.com/jquery.ajax/

或者使用像data:image/png;base64,iVBORw0KGgoAAAANSUhE...这样的Base64图像数据 并从网络服务加载它

或者您应该即时创建一个 img 标签并将 src 属性放到 url 中,如下所示,

$.fn.image = function(src, callback) {
   return this.each(function() {
         var i = new Image();
         i.src = src;
         i.onload = callback;
         this.appendChild(i);
   });
}

$("#btnLoadImg").on("click", function() {
   var container = $("div#container");
   $('#overlay').show();
   container.image("https://i.imgur.com/9fEliNr.jpg",function(){
      $('#overlay').hide();
      container.fadeIn();
   });	
});
#container {
   display: none;
}
#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
	display: none;
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnLoadImg" type="button">Load Image</button>
<div id="container"></div>
<div id="overlay"><img id="loading" src="https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif"></div>

参考:https://msankhala.wordpress.com/2012/08/29/loading-image-through-ajax/

在这里也可以看到一个类似的问题 Asynchronously load images with jQuery

【讨论】:

    【解决方案2】:

    这并不完美,但它包含所有步骤来满足您的要求,并进行了一些小的调整:)

    function loadImage(src, destinationNode) {
        var el = destinationNode instanceof jQuery ? destinationNode : $(destinationNode),
            img = new Image();
        
        img.onload = function() {
            el.empty()              // remove unnecessary child nodes
              .hide()               // hide the container
              .append(img)	        // add the image to the DOM
              .slideToggle(4000);   // fade the image in
        };
        
        el.text("Loading full image...");	// would be your spinner
        img.src = src;			// start loading the image
    }
    
    
    $("button").on("click", function() {
        loadImage("https://i.imgur.com/Nmuav.jpg" + "?_" + (new Date().getDate()), $("#fullImg"));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <button>Load image</button>
    <div id="fullImg"></div>

    【讨论】:

      猜你喜欢
      • 2015-06-26
      • 2012-06-05
      • 2014-04-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多