Question

基本上我需要

$("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吗？

Answer 1

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

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

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

或使用类似data:image/png;base64,iVBORw0KGgoAAAANSUhE...的Base64图像数据并从Web服务

加载它

或者你应该动态创建一个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

显示加载完整图像时加载GIF

1 个答案: