Question

我已经掀起了一小部分Jquery，当点击并再次返回时，它会将静态jpg换成gif。

我想要的是向用户显示它的加载，因为加载可能需要一两分钟，这可能吗？

var static_suffix = "_static.jpg";
var gif_suffix = ".gif";
$(document).on('click', ".img_anim", function(e)
{
    e.preventDefault();

    var actual_gif = $(this).attr("href");
    var image = $(this).find('img:first-child');
    var image_src = $(this).find('img:first-child').attr("src");

    // if it's static, turn it to a gif
    if (image_src.indexOf('jpg') !== -1)
    {
        image.attr("src", image_src.replace(static_suffix, gif_suffix));
    }
    // if it's a gif, turn it static
    else
    {
        image.attr("src", image_src.replace(gif_suffix, static_suffix));
    }     

});

Answer 1

事实证明这很容易，这就是我所做的基本上是用加载动画进行叠加，这会使静态图像变暗，然后在加载时替换为真正的gif：

// if it's static, turn it to a gif
if (image_src.indexOf('jpg') !== -1)
{
    image.css({ opacity: 0.3 });
    var $overlay = $('<div class="gif-loader"></div>');
    $overlay.css({
        position: "relative",
        display: "inline-block",
        width: image.width(),
        height: image.height(),
        backgroundPosition: "center center",
        backgroundImage: "url(/templates/default/images/bigloader.gif)",
        backgroundRepeat: "no-repeat"
    });
    image.wrap($overlay);
    $('<img src="'+ actual_gif +'">').on('load', function()
    {
        image.closest(".gif-loader").replaceWith('<img src="'+actual_gif+'" />');
    });
}

在切换图像时显示加载动画

1 个答案: