Как скрыть изображения с помощью JQuery сразу после их загрузки, которые имеют определенный размер - PullRequest
Новая
       7

Как скрыть изображения с помощью JQuery сразу после их загрузки, которые имеют определенный размер

0 голосов
/ 17 мая 2018

Я хотел бы разместить короткий фрагмент кода JQuery на веб-странице, которая содержит миниатюры изображений.Иногда миниатюрные изображения по какой-то причине удаляются с их сервера, и в этом случае ссылка на несуществующие изображения вызывает сообщение об ошибке от хостера изображений вместо миниатюрного изображения, которое также является изображением, но содержит ошибкутекст, отображаемый на маленьком изображении, и это изображение всегда имеет четко определенное известное разрешение, которое никогда не изменяется, например: ширина = 177, высота = 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

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Документация jquery указывает, что этот метод имеет предостережения, см. https://api.jquery.com/load-event/

Попробуйте выполнить следующее, но я не уверен, будет ли он работать с динамически добавленными изображениями: 

$( "img" ).load(function() {
       if (($(this).width()==177) && ($(this).height())==142) {
            $(this).hide()
       };
});
0 голосов
/ 17 мая 2018

Вы можете проверять свои imgs каждый раз, когда меняете документ. 

$(document).on("DOMSubtreeModified",function(){
    $("img:visible").each(function() {
        if(($(this).width()==177) && ($(this).height())==142) {
            $(this).hide()
        };
    });
});
0 голосов
/ 17 мая 2018

Вам необходимо привязать событие к каждому изображению, а не к 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');
...