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

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、脚本、纯文本和 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

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