Я использую jQuery load()
чтобы проверить, load()
ли изображение, которое я заменяю src
. Иногда кажется, что он застрял или повесил трубку. У меня есть ссылка jsFiddle ниже, чтобы проверить. Чтобы заставить загружать графику застрять на странице, нажмите одну из кнопок дважды.
http://jsfiddle.net/dmcgrew/LLMs8/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?).
У вас есть две проблемы: во-первых, ваш код несколько раз подключает обработчик нагрузки, что вызывает фанковое поведение. Во-вторых, ваш код не обрабатывает несколько кликов по одному и тому же элементу в строке. Попробуй это:
$("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();
});
Эта проблема, похоже, связана с тем, что вы пытаетесь загрузить() одно и то же изображение дважды, так как src фактически не изменяется, я думаю, что это вызывает проблемы.
Самый простой способ справиться с этим - просто проверить, соответствует ли текущий src выбранному src, например:
if($('img.the_image').attr('src') != 'http://farm7.staticflickr.com/' + imgPath) { }