如何在加载图片（在网页中）时向用户显示gif动画？

问题：我有一组图片，当用户按下其中一个图片时，图片会成长到页面中的一个区域。图片的交流是在js的帮助下完成的。图片重约0.5M，因此直到图片显示需要3秒。我想在图片不显示的时候呈现一种动画。如何在js的帮助下做到这一点？如何在加载图片（在网页中）时向用户显示gif动画？

来源

2010-03-01 Alon Ashkenazi

请不要这样做。你对你的用户撒谎，暗示事情进展顺利，实际上你对连接的状态一无所知。 – 2010-03-01 23:47:42

我至少会在5秒后给加载图片添加超时。然后显示一个像红色的X. – 2010-03-02 00:13:12

使用load事件，像：

$("img.something").click(function() { 
    $(".someDiv").html('<img src="loading.gif"/>'); 
    var $img = $('<img src="bigImage.jpeg" style="display:none"/>'); 
    $img.load(function() { 
     // once the loading has completed 
     $(".someDiv").html($(this)); 
     $(this).fadeIn("slow"); 
    }); 
});

来源

2010-03-01 23:37:23 karim79

真棒，但不要认为这需要jQuery – casraf 2010-03-01 23:59:56

总是有一个带有“加载”消息的“标签”标签，只要您的图像被插入，就会关闭。当然，即使是任何支持选框的人也会下台。

来源

2010-03-01 23:36:29

插入预留位置元素，并附onload事件回调到<img>元素。使用jQuery，

var imageElem = $('<img />'), 
    placeholder = $('<div class="loading">Loading...</div>'); 

imageElem.attr('src', 'http://example.com/big_image.jpg'); 

$('#images').append(placeholder).append(imageElem); 
imageElem.hide().load(function() { 
    placeholder.remove(); 
    imageElem.fadeIn(); 
});

来源

2010-03-01 23:47:22 nanotech

如何在加载图片（在网页中）时向用户显示gif动画？

回答

相关问题