Проверьте, загружается ли изображение (без ошибок) с помощью jQuery

StackOverflow https://stackoverflow.com/questions/1977871

Вопрос

Я использую JavaScript с библиотекой jQuery, чтобы манипулировать эскизами изображения, содержащимися в неупорядоченном списке. Когда изображение загружено, он делает одно, когда возникает ошибка, оно делает что -то еще. Я использую jQuery load() а также error() Методы как события. После этих событий я проверяю элемент DOM Image для .complete, чтобы убедиться, что изображение уже не загружено до того, как JQuery сможет зарегистрировать события.

Это работает правильно, за исключением случаев, когда возникает ошибка, прежде чем jQuery может зарегистрировать события. Единственное решение, о котором я могу придумать, - это использовать IMG onerror Атрибут для хранения «флага» где -то во всем мире (или на узле, это я), который говорит, что он не удался, чтобы jQuery мог проверить этот «хранилище/узел» при проверке .clote.

У кого -нибудь есть лучшее решение?

Редактировать: Bolded Bold Main Points и добавлены дополнительные детали ниже:Я проверяю, завершено ли изображение (он же загружен) после того, как добавляю событие загрузки и ошибки на изображение. Туда, Если изображение было загружено до того, как события были зарегистрированы, я все равно буду знать. Если изображение не загружено после событий, то события позаботятся о нем, когда это произойдет. Проблема с этим, я могу легко проверить, загружается ли изображение, но Я не могу сказать, произошла ли ошибка вместо этого.

Это было полезно?

Решение

Другой вариант - запустить onload и/или onerror События, создав элемент изображения в памяти и установив его src атрибут оригиналу src Атрибут исходного изображения. Вот пример того, что я имею в виду:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

Надеюсь это поможет!

Другие советы

Проверить complete а также naturalWidth Свойства, в таком порядке.

https://stereochro.me/ideas/detecting-rkenge-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

На основе моего понимания спецификация W3C HTML для img элемент, вы должны быть в состоянии сделать это, используя комбинацию complete а также naturalHeight Атрибуты, как так:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

От спецификации для complete атрибут:

Завершение атрибута IDL должно вернуть True, если какое -либо из следующих условий верно:

  • Атрибут SRC опущен.
  • Окончательная задача, которая находится в очереди со стороны сетевого источника задач после получения ресурса, была в очереди.
  • Элемент IMG полностью доступен.
  • Элемент IMG сломлен.

В противном случае атрибут должен вернуть ложь.

Так по сути, complete Возвращает True, если изображение закончило загрузку, либо не удалось загрузить. Поскольку мы хотим только тот случай, когда изображение успешно загружено, нам нужно проверить nauturalHeight атрибут также:

Атрибуты IDL naturalWidth а также naturalHeight Должен вернуть внутреннюю ширину и высоту изображения, в пикселях CSS, если изображение доступно, или еще 0.

А также available определяется так:

IMG всегда в одном из следующих состояний:

  • Недоступен - Пользовательский агент не получил никаких данных изображения.
  • Частично доступен - Пользовательский агент получил некоторые данные изображения.
  • Полностью доступно - Пользовательский агент получил все данные изображения, и, по крайней мере, доступны размеры изображения.
  • Сломанный - Пользовательский агент получил все данные изображения, которые он может, но он не может даже декодировать изображение достаточно, чтобы получить размеры изображения (например, изображение повреждено, или формат не поддерживается, или данные не могут быть получены).

Когда элемент IMG находится либо в частично доступном состоянии, либо в полностью доступном состоянии, он, как говорят, доступен.

Поэтому, если изображение «сломано» (не удалось загрузить), то оно будет в сломанном состоянии, а не в доступном состоянии, поэтому naturalHeight будет 0.

Поэтому проверка imgElement.complete && imgElement.naturalHeight !== 0 должен сказать нам, успешно ли изображение загрузилось.

Вы можете прочитать больше об этом в спецификация W3C HTML для img элемент, или же на MDN.

Я пробовал много разных способов, и этот способ единственный, кто работал для меня

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

Вы также можете добавить функцию обратного вызова, запускаемую после того, как все изображения загружаются в DOM и готовы. Это относится и к динамически добавленным изображениям. http://jsfiddle.net/kalmarsh80/nrapk/

Использовать imagesLoaded библиотека JavaScript.

Пригодны для использования с простым JavaScript и в качестве плагина jQuery.

Функции:

Ресурсы

Получить информацию из элементов изображения на странице
Тест, работая на Chrome и Firefox
Работающий jsfiddle (Откройте свою консоль, чтобы увидеть результат)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

Примечание: я использовал jQuery, Я думал, что это может быть достигнуто на полном JavaScript

Я нахожу здесь хорошую информацию OpenClassroom -> Это французский форум

Детектор сети в реальном времени - проверьте статус сети без обновления страницы:(Это не jQuery, но протестировано, и 100% работает: (проверено на Firefox V25.0)))

Код:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

Если подключение потеряно, просто нажмите кнопку снова.

Обновление 1:Авто обнаружит, не обновляя страницу:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Вот как я заставил его работать в браузере Cross, используя комбинацию приведенных выше методов (мне также нужно было динамически вставить изображения в DOM):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

Примечание. Вам нужно будет предоставить действующее логическое состояние для переменной ISIE.

Прочитав интересные решения на этой странице, я создал простое в использовании решение, на которое сильно влияют пост Slaks и Noyo, который, кажется, работает над довольно недавними версиями (на момент написания) Chrome, то есть Firefox, Safari и Опера (все в Windows). Кроме того, он работал на эмуляторе iPhone/iPad, который я использовал.

Одним из основных различий между этим решением и пост Slaks и Noyo заключается в том, что это решение в основном проверяет свойства естественной ширины и естественного хеды. Я обнаружил, что в нынешних версиях браузера эти два свойства, кажется, дают наиболее полезные и последовательные результаты.

Этот код возвращает True, когда изображение загружается полностью и успешно. Он возвращает false, когда изображение либо не загружено полностью, либо не удалось загрузить.

Одна вещь, о которой вам нужно знать, это то, что эта функция также вернет False, если изображение является изображением пикселя 0x0. Но эти изображения довольно редки, и я не могу придумать очень полезный случай, когда вы хотели бы проверить, загрузило ли изображение 0x0 пикселей :)

Сначала мы прикрепляем новую функцию, называемую «ISloaded» к прототипу HTMLimageElement, чтобы функция была использована в любом элементе изображения.

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

Затем, когда нам нужно проверить состояние загрузки изображения, мы просто называем функцию «ISloaded».

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

По сообщениям Джорджина о пост Slaks и Noyo, это решение, вероятно, может использоваться только в качестве одноразовой проверки на Safari Mobile, если вы планируете изменить атрибут SRC. Но вы можете обойти это, создав элемент изображения с новым атрибутом SRC вместо изменения атрибута SRC на существующем элементе изображения.

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// или как плагин

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded()

Насколько я понимаю, свойство .complete нестандартно. Это не может быть универсальным ... Я замечаю, что это, кажется, работает по -другому в стихах Firefox, т.е. Я загружаю несколько изображений в JavaScript, а затем проверяю, если завершено. В Firefox это, кажется, отлично работает. В IE это не так, потому что изображения, кажется, загружаются в другой поток. Это работает только в том случае, если я положу задержку между заданием на image.src и когда я проверю свойство Image.complete.

Использование Image.onload и Image.Onerror также не работает для меня, потому что мне нужно передать параметр, чтобы узнать, о каком изображении я говорю, когда вызывается функция. Любой способ сделать это, кажется, терпит неудачу, потому что это на самом деле, кажется, выполняет одну и ту же функцию, не разные случаи одной и той же функции. Таким образом, значение, которое я передаю в него, чтобы идентифицировать изображение, всегда оказывается последним значением в цикле. Я не могу думать о этой проблеме.

На Safari и Chrome я вижу набор Image.complete True и набор естественной ширины, даже когда консоль ошибок показывает 404 для этого изображения ... и я намеренно удалил это изображение, чтобы проверить это. Но вышеупомянутое хорошо работает для Firefox и IE.

Этот фрагмент кода помог мне исправить проблемы кэширования браузера:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

Когда кеш браузера отключен, только этот код не работает:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

Чтобы заставить его работать, вы должны добавить:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

Используя это JavaScript Код вы можете проверить, что изображение успешно загружено или нет.

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

Попробуйте это

У меня было много проблем с полной нагрузкой изображения и Eventlistener.

Что бы я ни пробовал, результаты не были надежными.

Но тогда я нашел решение. Технически это не очень хороший, но теперь у меня никогда не было неудачной загрузки изображения.

Что я сделал:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

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

Все мои головные боли ушли!

Кстати: вы, ребята из Stackoverflow, помогли мне уже более сто раз. За это большое спасибо!

Этот работал нормально для меня :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top