如何在加载后立即用JQuery隐藏具有特定尺寸的图像

Question

我想在网页上放置一个简短的JQuery代码片段，该网页包含缩略图图像。有时缩略图图像由于某种原因从它们的服务器上被删除，在这种情况下，链接到不存在的图像导致从图像寄存器而不是从缩略图图片提供错误消息，该缩略图图片也是一个图像，但是包含错误文本，呈现在小图片上，并且该图像总是具有明确的已知分辨率，该分辨率永远不会改变，例如: width=177，height=142。

我的尝试是实现隐藏包含错误信息的不需要的图像，并在“实时”图像上工作，这些图像是通过DOM操作、javascript、JQuery、分页等在网页上自动创建的：

$(document).on('load', 'img', function() { 
           if (($(this).width()==177) && ($(this).height())==142) {
                $(this).hide()
           };})

由于某些原因，这根本不起作用，图像不会被隐藏。但是，当我应用这个而不是前一个时：

$(document).on('click', 'img', function() { 
           if (($(this).width()==177) && ($(this).height())==142) {
                $(this).hide()
           };
           return(false);})

然后它就可以工作了，当我点击它们时，具有适当分辨率的图像会被隐藏起来，事件处理程序也会附加到“实时”图像上，这些图像是由网页的内置javascript机制通过DOM操作创建的，这就是分页。网页上的分页是通过更改div元素的内容来实现的，而不是通过加载/重新加载整个页面。我使用的是JQuery 3.3.1

Answer 1

您需要将事件绑定到每个图像，而不是绑定到document

$('img').on('load', function() {
       var image = $(this);
       if (image.width() == 177 && image.height() == 142) {
            image.hide();
       };
});

对于运行时创建的镜像，您可以执行以下操作：

// Create a reusable function to eval each image
function evalImage(image) {
    if (image.width() == 177 && image.height() == 142) {
        image.hide();
    }
}

// Create a reusable function to hook to image load
function checkOnLoad(image, source) {
    image.load(function() {
        evalImage($(this));
    });
    newimage.attr('src', source);
}

// Eval images on first load
$('img').on('load', function() {
    evalImage($(this));
});

// Create a new image and eval when loaded
var newimage = $('<img />');
checkOnLoad(image, 'path/to/source.jpg');

Answer 2

jquery文档中提到此方法有一些注意事项，请参阅https://api.jquery.com/load-event/

尝试以下操作，但我不确定它是否适用于动态添加的图像：

$( "img" ).load(function() {
       if (($(this).width()==177) && ($(this).height())==142) {
            $(this).hide()
       };
});

Answer 3

您可以在每次更改文档时检查imgs。

$(document).on("DOMSubtreeModified",function(){
    $("img:visible").each(function() {
        if(($(this).width()==177) && ($(this).height())==142) {
            $(this).hide()
        };
    });
});