Question

我有这个html：<img src="myimage.jpg" id="idimg">

有没有办法用javascript将src更改为我的ajax.gif，直到图像完全加载？

请注意我已经在这里观看过：How to display a wait gif until image is fully loaded

但我不希望这样，因为我希望我的初始html与我在那里写的（使用原始图像的src）而不是假的div容器

THX

Answer 1

使用相同的理论，您可以在HTML源代码中包含2个图像，一个作为ajax.gif加载程序，另一个作为您计划显示的实际图像。使用css确保仅在页面加载时显示加载器，然后将onload事件附加到实际图像。当它被触发时，你可以在两者之间淡出。

话虽如此，我不确定IE中图像onload事件的兼容性。

Answer 2

在jQuery中你可以这样做：

 $('your_img_selector').attr('src', 'ajax.gif'); //just change your img by the ajax.gif without any treatment

 var img = $(new Image()); //create a new jQuery image object
 img.load(function()
 {
     $('your_img_selector').after(this); //append the new object to your img
     $('your_img_selector').remove(); //remove your img, so it continue as if as your img was simply changed ;)
 }).attr('src', 'the_image_you_want_to_be_shown_after_ajax_loading');

我没有测试这段代码，但这是我在系统上实现的一个想法，所以我知道它有效;）我不知道如何在纯JavaScript中做，但我认为它与此没有太大区别。至少这个想法;）

它希望有用！：d

Answer 3

假设在根目录的“Imagens”文件夹中有一个图像loading.gif。

<强> JS：

$('img').css('opacity', function () {
    $(this).wrap("<div class='img-loading'></div>")
    return '0';
}).load(function () {
    var img = $(this);
    $(this).unwrap();
    $(this).animate({
        opacity: 1
    }, 500);
});

<强> CSS

.img-loading {
    background: url('/Imagens/loading.gif') 50% 50% no-repeat;
}

Answer 4

将CSS中background标记的<img>属性设置为您的加载GIF。您需要在图片上设置width和height才能使其正常工作。 E.g：

<强> HTML

<img src="yourBigImage.jpg" width="1200" height="800" />

<强> CSS

img {
    background: url("loading.gif") 50% 50% no-repeat;
}

Answer 5

不确定这是否是您想要的，但我认为它非常有用。下面的代码将在加载Ajax时淡入和淡出加载类。

$('.load').ajaxStart(function () {
        $(this).fadeIn();
    });
    $('.load').ajaxStop(function () {
        $(this).fadeOut();
    });

显示预加载的gif，直到图像完全加载？

5 个答案: