jQuery определяет загрузку изображения

Question

Я создаю веб-сайт с помощью jQuery Mobile, и у меня возникают проблемы с корректным управлением изображениями.

Сначала вот адрес . Изображения, о которых идет речь, находятся на любом из сайтов и графических ссылок.

В моем CSS я увеличиваю изображение до размера экрана:

img.size{
    width: 95%;
    padding: 1.5% 1.8% 3% 2.3%;
    background-image: url("../images/content/img-bg.png");
    background-size: 100%;
}

К сожалению, до загрузки изображения высота равна 0px, но отступы все еще отображаются, поэтому я вижу только некрасивую верхнюю часть фона, пока изображение не загрузится, чтобы покрыть его.

Я должен иметь возможность либо скрыть изображение, установить фоновое изображение равным none или установить отступ в 0px до тех пор, пока изображение не загрузится, а затем изменить его с помощью jQuery, но (я думаю, поскольку изображения загружаются через Ajax после полная страница загружена) jQuery не видит загруженных изображений. Например, все изображения будут скрыты, поэтому они будут обнаружены:

$('img').css('visibility', 'hidden');

Но это не сработает, даже если я уберу вышеуказанную строку кода и заставлю CSS скрыть изображения по умолчанию

так в CSS:

img{
    visibility: hidden;
}

и в коде:

$('img').load(function() {
    $('img').css('visibility', 'visible');
});

или

$('img').complete(function() {
    $('img').css('visibility', 'visible');
});

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

Спасибо.

p.s. Я могу добавить высоту CSS в px или em, но

height: 95%;

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

Answer 1

В зависимости от браузера, $('img') .complete работает лучше, чем load()

Вот скрипт, который я сделал для тяжелой фотогалереи:

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

countImgs = $("#container > img").size();
imgsLoaded = 0;

$("#container > img").each( function() {

        if(this.complete) {
            imgsLoaded++;
        } else {
            $(this).load( function() {
                imgsLoaded++;
            });
        }
});

Затем выполните некоторую функцию сsetTimeout для проверки, если imgsLoaded==compteImgs.