代码之家 › 专栏 › 技术社区 › Eli Courtwright

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

javascript-events jquery javascript

Eli Courtwright · 技术社区 · 16 年前

我在一个由服务器端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或其他方式加载/更改/更新图像并在加载完成时进行检测?

1 回复 | 直到 16 年前

marcgg 16 年前

您可以尝试此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');
    });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前