Как мне обработать отсутствующее изображение в моем плагине?

Question

Я написал jQuery-плагин с именем waitForImages . Это в основном дает возможность запускать обратные вызовы при загрузке изображений.

Недавно я получил запрос функции , чтобы как-то заставить код уведомлять об ошибке при загрузке изображения.

Может ли плагин вызывать функцию, когда изображение не найдено?

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

image.onerror = function() {
     eachCallback.call(img.element, allImgsLoaded, allImgsLength, true);
}

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

Хотя эта идея пахнет для меня. Что если я захочу добавить дополнительный аргумент позже? Должен ли такой же обратный вызов вызываться для успешной и неудачной загрузки образа?

Затем я подумал о создании исключения, если изображение не найдено.

throw new Error(img.src ' + does not exist');

Это, однако, не так гибко, чтобы поймать, вам нужно было бы вызвать плагин так ...

try {
   $('body').waitForImages();
} catch (exception) {
    // Which image didn't load?
    alert(exception.message);
}

Как лучше всего справиться, если изображение не загружается в мой плагин?

Answer 1

Я бы добавил конкретный обратный вызов для условий ошибки.

У вас уже есть это:

$('selector').waitForImages({
    finished: function() {
        ...
    },
    each: function() {
       ...
    },
    waitForAll: true
});

Вы должны рассмотреть вопрос об изменении его на:

$('selector').waitForImages({
    finished: function() {
        ...
    },
    finishedError: function() {
        ...
    },
    each: function() {
       ...
    },
    eachError: function() {
       ...
    },
    waitForAll: true
});

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

Я предпочитаю это по нескольким причинам:

1. Это отделяет обработку ошибок
2. У вас может быть другой набор аргументов для коллбэков успеха или неудачи
3. Вы легко можете добавить колбэки для разных ошибок (маловероятно для этого случая)

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

Answer 2

Попробуйте: (элемент DOM .complete var)

$('img').each(function(){
     if($(this).complete != 'true'){
          /* workarround here */
     }
})

СОВЕТ: Если вы обнаружили, что некоторые изображения не загружаются, вы можете заменить URL-адреса изображением по умолчанию, говоря, что «изображение не найдено»:)

Answer 3

В любом случае это указывает на то, что вам, вероятно, следует связать свою функцию в строке 103 с error и load, и, вероятно, следует принять событие в качестве аргумента этой функции.В противном случае вы никогда не будете поднимать флаг, что браузер завершил обработку изображений.Это может быть так просто, как вызов $(image).bind("load error", function(e) { allImagesLoaded++; ... }).Внутри функции вы можете перейти к параметрам обработки ошибок, проверив e.type === "error", например, подняв флаг о том, что произошел сбой, и обратный вызов ошибки необходимо выполнить после завершения всех изображений.

У вас уже есть обработкадля объекта параметров.Лучше всего сделать так, чтобы пользователь мог выполнять обратные вызовы в случае ошибок, добавляя дополнительные параметры в этом объекте.Это будет соответствовать подходу других распространенных плагинов и базовых функций jQuery.Я бы предложил рассмотреть модель обратного вызова для jQuery.ajax().Разрешить пользователям указывать обратные вызовы для success, которые выполняются при успешной загрузке всех изображений, error, который позволяет использовать другой путь выполнения при возникновении любого события ошибки, и complete, который выполняется после того, как все изображения сгенерировали свои события, независимо отуспех или неудача.Вы также можете добавить опцию обратного вызова для обработки ошибок сразу после сбоя одного изображения, хотя я не обязательно чувствую, что это соответствует области действия плагина.Не раздумывайте, если это действительно не добавляет функциональности.

Answer 4

Это похоже на то, для чего вы хотите использовать отложенные объекты jQuery: http://api.jquery.com/category/deferred-object/.

По сути, это позволяет вам создать объект (var x = jQuery.Deferred()). Затем вы можете добавить обработчики завершения, успеха и ошибок, как если бы вы добавили объект jQuery.ajax, используя x.always(callback), x.done(successCallback), x.fail(errorCallback) соответственно. Очевидно, что имена функций и / или свойств для присоединения таких обработчиков к вашему внутреннему отложенному объекту зависят от вас.

Вы можете передать текстовый статус этим обработчикам, таким как jQuery.ajax, или количество завершенных / ошибочных изображений, когда вы разрешаете отложенный объект, используя x.resolveWith и x.rejectWith.

Я думаю, что такие функции лучше всего подходят для полного завершения / успеха / неудачи загрузки изображения, но вы также можете использовать одну и ту же систему для каждого изображения отдельно. При вызове вашего плагина вы сохраняете обработчики в локальном объекте и создаете новый отложенный объект для каждого изображения, с которым сталкиваетесь, добавляя обратные вызовы к этому новому отложенному объекту.

Answer 5

Хороший плагин:)

После того, как я проверю ваш код, я сообщу об ошибке после этого куска кода:

image.onload = function() {
    allImgsLoaded++;
    eachCallback.call(img.element, allImgsLoaded, allImgsLength);
    if (allImgsLoaded == allImgsLength) {
        finishedCallback.call(obj[0]);
        return false;
    };
};

image.onerror = function() {
    errorCallback.call(img.element);
    return false;
}

Конечно, вам нужно ввести новую функцию обратного вызова, такую ​​как

$('selector').waitForImages(function() {

    alert('All images are loaded.');

}, function(loaded, count) {

   alert(loaded + ' of ' + count + ' images have loaded.');
   $(this).addClass('loaded');

}, function(img) {
   alert('error');
});

Надежда помогает :)