jQuery load () застревает / зависает

Question

jQuery load () застревает / зависает

0

Я использую jQuery load() чтобы проверить, load() ли изображение, которое я заменяю src. Иногда кажется, что он застрял или повесил трубку. У меня есть ссылка jsFiddle ниже, чтобы проверить. Чтобы заставить загружать графику застрять на странице, нажмите одну из кнопок дважды.

http://jsfiddle.net/dmcgrew/LLMs8/3/

Это "почти" реплицирует проблему на сайте, который я сейчас создаю, но я думаю, что эти проблемы связаны. На сайте, который я создаю, это "зависание" происходит только тогда, когда я делаю следующие шаги:

Нажмите кнопку "Изображение 3"
Нажмите кнопку "Скрыть"
Нажмите кнопку "Изображение 3" еще раз
График загрузки теперь застрял на странице.

Вот мой JS...

$("button").not("off").bind("click", function(){

    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    console.log(imgPath);

    $(".loading").show(); //show loading gif
    $("img.the_image").hide(); //hide the img

    $("img.the_image").attr("src","http://farm7.staticflickr.com/"+imgPath).load(function() { 
        $(".loading").hide(); //hide loading gif
        $("img.the_image").show(); //show the newly loaded img
    });

});

$("button.off").bind("click", function(){
    $("img").hide();
});

Действительно ли load() лучший способ проверить, загружено ли изображение? Есть ли лучший способ заменить изображение и проверить его загрузку (возможно, AJAX?).

Dustin 24 сен. 2013, в 16:13

Источник

Теги:

javascript

jquery

2 ответа

0

Эта проблема, похоже, связана с тем, что вы пытаетесь загрузить() одно и то же изображение дважды, так как src фактически не изменяется, я думаю, что это вызывает проблемы.

Самый простой способ справиться с этим - просто проверить, соответствует ли текущий src выбранному src, например:

if($('img.the_image').attr('src') != 'http://farm7.staticflickr.com/' + imgPath) { }

http://jsfiddle.net/LLMs8/7/

Tim Sheehan 24 сен. 2013, в 12:29

Ещё вопросы

Jason P · Accepted Answer · 2013-09-24T11-30-00.000Z

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

http://jsfiddle.net/E3Avx/

$("button").not("off").bind("click", function () {

    var imgPath = $(this).attr("data-image"); //grab image path from data attr
    var newImgPath = 'http://farm7.staticflickr.com/' + imgPath;

    if ($('img.the_image').attr('src') != newImgPath) {

        $(".loading").show(); //show loading gif
        $("img.the_image").hide(); //hide the img

        $("img.the_image").attr("src", newImgPath);
    }

});

$("img.the_image").load(function () {
    console.log('load handler');
    $(".loading").hide(); //hide loading gif
    $("img.the_image").show(); //show the newly loaded img
});

$("button.off").bind("click", function () {
    $("img").hide();
});