Question

我使用每个函数来检查图形标记中的外部图像是否“活着”。如果不是它应该完全删除图形容器，否则它应该附加img作为背景并删除图像标签本身。一般来说，最后一项任务是正确完成的，但在图像不活动时不是删除部分

$("figure img").each(function () {
    $(this).error(function() {
        $(this).parent().remove();
    });
});

$("figure img").each(function () {
    var source = $(this).attr("src");
    $(this).closest("figure").css("background-image", "url(" + source + ")");
    $(this).remove();
});

http://jsfiddle.net/skiweather/sL3hhhct/

Answer 1

.error()已弃用，因此您不应该使用它。请改用.on("error")。

代码的问题是.error()是一个事件处理程序，因此它以异步方式运行。但是您的第二个.each()会同步运行，因此它会在调用.error()代码之前删除所有图像。您应该将该块放在load事件的处理程序中，以便在图像成功加载时运行。

绑定事件处理程序时，您也不需要使用.each()。您可以直接将处理程序绑定到集合。

$("figure img").on({
    load: function() {
        var source = $(this).attr("src");
        $(this).closest("figure").css("background-image", "url(" + source + ")");
        $(this).remove();
    },
    error: function() {
        $(this).parent().remove();
    }
});

DEMO

Answer 2

这完全是关于时间的。如果为响应适当的浏览器事件而运行，您的代码将起作用（注意复数形式）。

文档就绪：将错误处理程序附加到img元素
加载文件：设置bg图像等

$(document).ready(function() {
    $("figure img").each(function () {
        $(this).on('error', function() {
            $(this).parent().remove();
        });
    });
});

$(document).load(function() {
    $("figure img").each(function () {
        var source = $(this).attr("src");
        $(this).closest("figure").css("background-image", "url(" + source + ")");
        $(this).remove();
    });
});

<强> DEMO

请注意，小提琴设置为＆＃34;没有包裹在头部＆＃34;选项

但是，在文档准备好的情况下设置所有内容可能更清晰，并附加“错误”错误。和一个负载＆＃39;处理图像：

$(document).ready(function() {
    $("figure img").each(function () {
        var $that = $(this);
        $that.on({
            'error': function() {
                $that.parent().remove();
            },
            'load': function() {
                var source = $that.attr("src");
                $that.closest("figure").css("background-image", "url(" + source + ")");
                $that.remove();
            }
        });
    });
});

<强> DEMO

每个功能都不执行删除非活动图像

2 个答案: