jQuery - при смене источника изображения динамически сначала мигает исходное изображение, а затем изменяется

Question

РЕДАКТИРОВАТЬ: Я ищу здесь все решения jquery, я не могу отредактировать html / css, чтобы изначально не показывать изображение.

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

Я понимаю, что простой ответ:

$('.logo').attr('src', newlogosrc);

Однако я также пробовал некоторые вещи, такие как:

$('.logo').hide();
$('.logo').attr('src', newlogosrc);
$(this).delay(500).show();

Который просто задерживает весь процесс (ждет полсекунды, затем мигает исходное изображение, затем меняет его на новое изображение).

Есть идеи?

Answer 1

Существует два способа предотвратить первоначальное отображение изображения:

1. Поместите встроенный style="display: none;" в сам тег изображения.
2. Добавить правило CSS .logo {display: none;}, которое активно по умолчанию.

Конечно, вы можете также скрыть содержащий div вместо самого изображения, если это более практично, и вы можете использовать visibility: hidden вместо display: none, если хотите.

Javascript запускается ПОСЛЕ загрузки DOM, поэтому, если изображение не скрыто на уровне HTML (до запуска JS), оно может отображаться изначально.

Как только одно из этих двух правил CSS станет активным по умолчанию, изображение не будет отображаться изначально, и вы можете использовать javascript для правильной установки атрибута .src, а затем отобразить изображение с помощью javascript.

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

$('.logo').load(function() {
    $(this).show();
}).attr("src", newlogosrc);

Показывает, когда новое изображение успешно загружено.