Простой загрузчик изображений

Question

Простой загрузчик изображений

0

У меня есть простой сценарий загрузки с двумя изображениями:

$('.img-loading').show();
// main image loaded ?
$('.the-big-img').hide().load(function () {
    // hide/remove the loading image
    $('.img-loading').hide();
    $('.the-big-img').fadeIn();
});

Однако... это, похоже, работает только в большинстве случаев. Несколько раз я остаюсь с загружаемым изображением без отображения Big img. Я не уверен, в каких случаях изображение не отображается (все они хранятся на моем локальном хосте и соответствуют тем же критериям).

Если я нажму F5/refresh на страницах, где Big img не загрузился, они будут загружаться во второй раз.

Есть предположения?

UPDATE: нашел некоторую информацию здесь о кеше: jQuery.load() не стреляет в изображения (возможно, кеширование?)

James 30 нояб. 2013, в 15:52

Источник

0

Можете ли вы предоставить ссылку на это на странице в реальном времени? Если нет, попробуйте использовать встроенный CSS на изображениях, чтобы узнать, как они должны начинаться, а затем установите img-loading в hide () + the-big-img в fadeIn () внутри load() . Также, дайте им обоим один и тот же класс и используйте id="img-loading" т. Д. Для специфичности. Затем вы можете вызвать $('.both-images-to-load').load() и он загрузится, когда они оба будут завершены
Deryck 30 нояб. 2013, в 14:04
0

Да, и загрузка изображений и выполнение таких действий не очень точны, потому что браузеры могут кэшировать изображение, а затем .load() не запускается, потому что браузер никогда не запрашивает его. Вот почему вы не видите другое изображение до тех пор, пока не обновите его (обновление очищает кэш, чтобы получить новое изображение)
Deryck 30 нояб. 2013, в 14:09
0

Да, я считаю, что кэш должен быть проблемой. Итак ... какое решение? :(
James 30 нояб. 2013, в 14:13
0

Хорошо, я нашел соответствующую тему здесь: stackoverflow.com/questions/5624733/…
James 30 нояб. 2013, в 14:17

Показать ещё 2 комментария

Теги:

jquery

1 ответ

Ещё вопросы

Можете ли вы предоставить ссылку на это на странице в реальном времени? Если нет, попробуйте использовать встроенный CSS на изображениях, чтобы узнать, как они должны начинаться, а затем установите img-loading в hide () + the-big-img в fadeIn () внутри load() . Также, дайте им обоим один и тот же класс и используйте id="img-loading" т. Д. Для специфичности. Затем вы можете вызвать $('.both-images-to-load').load() и он загрузится, когда они оба будут завершены
Да, и загрузка изображений и выполнение таких действий не очень точны, потому что браузеры могут кэшировать изображение, а затем .load() не запускается, потому что браузер никогда не запрашивает его. Вот почему вы не видите другое изображение до тех пор, пока не обновите его (обновление очищает кэш, чтобы получить новое изображение)
Да, я считаю, что кэш должен быть проблемой. Итак ... какое решение? :(
Хорошо, я нашел соответствующую тему здесь: stackoverflow.com/questions/5624733/…

Deryck · Accepted Answer · 2013-11-30T13-22-00.000Z

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

Отключить ETag в Apache:

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

Header unset ETag
FileETag None

Справочные и дальнейшие инструкции

Поместите анимацию держателя изображения вместо ожидающего изображения, пока оно не загрузится:

Загрузка ленивого изображения

Да, я получил часть «Загрузка-img». С другой стороны, я не знаю, насколько я чувствую себя комфортно, удаляя кеш, загружая разные версии одного и того же изображения каждый раз, чтобы получить «эффект загрузки».