Получение сломанного изображения, но оно загружается как новая вкладка

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

var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [        
        'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
        'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
        'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
    ];

    function nextPic() {
      counter += 1;
      if (counter > myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />



    
 
</body>
</html>

Источник

2 ответа

Решение

Просто переместите эту строку в свой nextPic() функция, так что вы не пытаетесь захватить это div прежде чем он будет загружен в DOM.

function nextPic() {
  var target = document.getElementById('target');
  ...

Иногда <script defer> будет автоматически ждать загрузки DOM, иногда это не так. Это JavaScript. Что есть, то есть.

откладывать

Этот логический атрибут установлен для указания браузеру, что сценарий должен выполняться после анализа документа, но до запуска DOMContentLoaded. Этот атрибут не должен использоваться, если src атрибут отсутствует (то есть для встроенных скриптов), в этом случае он не будет иметь никакого эффекта. Для достижения аналогичного эффекта для динамически вставленных скриптов используйте async=false вместо.

Вот хорошая предыстория при загрузке скрипта.

Источник 

var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [        
        'https://media.giphy.com/media/3ohhwJax6g4Y8BK30k/giphy.gif',
        'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif',
        'https://media.giphy.com/media/1nkUav308CBws/giphy.gif'
    ];

    function nextPic() {
      counter += 1;
      if (counter == myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="https://media.giphy.com/media/1nkUav308CBws/giphy.gif" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />



    
 
</body>
</html>

Источник
Другие вопросы по тегам