Question

我在网页上有一个图像，它是由服务器端CGI程序动态生成的。定期刷新该图像和/或根据用户输入改变该图像。所以我有一个像

这样的Javascript函数

// <img id="screen" src=""> is elsewhere in the page
function reloadImage() {
    $("#screen").attr("src", make_cgi_url_based_on_form_inputs());
}

这很好用，但有时加载图片需要一段时间。因此，我希望某些消息显示为“正在加载图像...”，但是当图像加载并在浏览器中显示时，该图像会消失。

是否有任何类型的Javascript事件可以执行此操作？或者，有没有其他方法可以加载/更改/更新图像并通过Ajax或其他任何方式检测加载何时完成？

Answer 1

你可以尝试这个jquery解决方案：http://jqueryfordesigners.com/image-loading/

$(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
    });

检测特定图像何时完成加载

1 个答案: