Question

我的图片酒店在尝试加载大尺寸图片时占据了一点点。如何在实际图像加载之前设置Ajax Loader GIF图像，以使我的用户理解等待。感谢。

$(document).ready(function () {
    window.showim = function(src) {
        $("#imgLoader").attr("src", src);
    };
});

JSFiddle：http://jsfiddle.net/52dY7/

Answer 1

最简单的方法是从目标图像源中的加载器图像开始。

<img id="imgLoader" src="path/to/your/loader.gif" />

看这里...... http://jsfiddle.net/xflofoxx/52dY7/2/

Answer 2

$(document).ready(function () {
    $('img').each(function() {
        var $img = $(this),
            origSrc = $img.attr('src');

        $img.attr('src', '/path/to/loader/image');

        $('<img />').on('load', function() {
            $img.attr('src', origSrc);
        }).attr('src', origSrc);
    });
});

实际图像加载前的Ajax加载程序映像

2 个答案: