Загрузите внешнюю фотографию с помощью javascript

Question

Я пытаюсь установить источник изображения объекта изображения с помощью javascript.

Я попытался

<img src="" id="image" alt=""> 
<p id="change">Change</p> 

$("#change").click(function() { 
    $("#image").attr("src", "some source"); 
}); 

Проблема заключается в том, что кажется, это меняет СРК, но он не работает, если изображение не было загружено, когда страница загружена. Поэтому я не могу внезапно перейти на логотип Stackoverflow. Может ли это быть правдой? Как я могу загрузить изображение при изменении источника?

Answer 1

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

Если самозагрузки установлен, это так же просто, как добавление и удаление класса с помощью JQuery

HTML

<img src="" id="image1" alt=""> 
<img src="" id="image2" alt="" class="hidden"> 
<p id="change">Change</p> 

Javascript

$("#change").click(function() { 
    $('#image1').addClass('hidden'); 
    $('#image2').removeClass('hidden'); 
});