Question

我有以下小脚本似乎可以工作，但其中两个图像看起来很破碎。当我右键单击并加载为新选项卡时，它们会加载：

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>

Answer 1

只需在nextPic()函数中移动此行，这样您就不会在将div加载到DOM之前尝试抓取它。

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

有时<script defer>会自动等待DOM加载，有时它不会。它的JavaScript。就是这样。

延迟

此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本。如果src属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下，它将不起作用。要为动态插入的脚本实现类似的效果，请改用async=false。

这是一个很好的backstory on script loading。

Answer 2

＆＃13;

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];
    }

＆＃13;

<!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>

＆＃13;

获取损坏的图像但它作为新选项卡加载

2 个答案:

延迟