图片（）onLoad不等待图像加载

Question

我已经想出了居中和调整大小的问题，但我仍然无法让onLoad正常工作。有人有主意吗？我认为onLoad应该等待图像被完全加载之前触发代码。因为这是现在，它调整img为下一个img，并在它加载之前淡入，因此前一个图像再次淡入。一旦节目一次完成，它完美的工作，所以显然它不等待图像加载之前完全加载imageLoad()。

<div id="slideShow"> 
    <div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;"> 
    </div> 
    <div id="slideShowThumbs"> 
    </div> 
    <script type="text/javascript"> 
     loadXMLDoc('http://www.thehoppr.com/hopspots/82/82.xml', function() { 
      var slideShow = document.getElementById('slideShow'); 
      var items = []; 
      var nl = xmlhttp.responseXML.getElementsByTagName('image'); 
      var i = 0; 
      var t; 
      var slideShowImg = document.getElementById('slideShowImg'); 
      var slideShow = document.getElementById('slideShow'); 
      var maxHeight = 300; 
      var maxWidth = 800; 
      var imgNode = new Image(); 


      function image() { 
       var nli = nl.item(i); 
       var src = nli.getAttribute('src').toString(); 
       var width = parseInt(nli.getAttribute('width').toString()); 
       var height = parseInt(nli.getAttribute('height').toString()); 
       imgNode.onLoad = imageLoad(); 
       imgNode.src = src; 
       imgNode.height = height; 
       imgNode.width = width; 
       imgNode.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;"); 

       var ratio = maxHeight/maxWidth; 
       if (imgNode.height/imgNode.width > ratio) { 
        // height is the problem 
        if (imgNode.height > maxHeight) { 
         imgNode.width = Math.round(imgNode.width * (maxHeight/imgNode.height)); 
         imgNode.height = maxHeight; 
        } 
       } else { 
        // width is the problem 
        if (imgNode.width > maxHeight) { 
         imgNode.height = Math.round(imgNode.height * (maxWidth/imgNode.width)); 
         imgNode.width = maxWidth; 
        } 
       } 
      } 

      function imageLoad() { 
       slideShowImg.appendChild(imgNode); 
       Effect.Appear('slideShowImg', { 
        duration: 1 
       }); 

       t = setTimeout(nextImage, 7000); 
      } 

      function nextImage() { 
       slideShowImg.setAttribute("style", "display:none"); 
       if (i < nl.length - 1) { 
        i++; 
        image(); 
       } else { 
        i = 0; 
        image(); 
       } 
      } 

      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //XML Loaded, create the slideshow 
       alert(xmlhttp.responseText); 
       image(); 
      } 
     }); 
    </script> 

Answer 1

下面是我的一些想法（这是所有开放式讨论）...

1. 预压 - 既然你限制并行下载每个主机名 2级的资源，也可以不有意义的预先加载一切。由于它是幻灯片，如何修改image（）以通过不会附加到DOM的Image对象下载i + 1图像？在幻灯片放映设置中预取i + 2和更高版本似乎没有好处。

2. 居中图像 - 关于使用自动边距宽度进行水平居中，我相信你必须明确地设置图像显示：块。显然这并不能解决垂直居中问题。所有的图像都是相同的大小？另外，slideShowImg div是否有定义的高度/宽度？如果是这样，那么可以应用一些数学来实现对中。

希望这有助于！ :)

Answer 2

好吧，所以我解决了onLoad的问题，我甚至还添加了一些预加载以帮助幻灯片放映。我所要做的就是首先定义onload，然后执行其他所有操作，除了在onload的函数中定义src。然后，我添加了一些nextImg预加载，因此即使在浏览器第一次加载图像时，图像之间也没有任何呃逆。 这里的人谁也有类似的onload的问题，并认为有办法在这里最终代码：

<div id="slideShow"> 
    <div id="slideShowImg" style="display:none; margin-right:auto; margin-left:auto;"> 
    </div> 
    <div id="slideShowThumbs"> 
    </div> 
    <script type="text/javascript"> 
     loadXMLDoc('/82.xml', function() { 
      var slideShow = document.getElementById('slideShow'); 
      var items = []; 
      var nl = xmlhttp.responseXML.getElementsByTagName('image'); 
      var i = 0; 
      var t; 
      var slideShowImg = document.getElementById('slideShowImg'); 
      var slideShow = document.getElementById('slideShow'); 
      var maxHeight = 300; 
      var maxWidth = 800; 
      var curImg = new Image(); 
      var nextImg = new Image(); 

      function image() { 
       var cli = nl.item(i); 
       var src = cli.getAttribute('src').toString(); 
       var width = parseInt(cli.getAttribute('width').toString()); 
       var height = parseInt(cli.getAttribute('height').toString()); 
       curImg.onload = function() { 
        curImg.height = height; 
        curImg.width = width; 
        curImg.setAttribute("style", "margin-right:auto; margin-left:auto; display:block;"); 
        slideShowImg.appendChild(curImg); 
        var ratio = maxHeight/maxWidth; 
        if (curImg.height/curImg.width > ratio) { 
         // height is the problem 
         if (curImg.height > maxHeight) { 
          curImg.width = Math.round(curImg.width * (maxHeight/curImg.height)); 
          curImg.height = maxHeight; 
         } 
        } else { 
         // width is the problem 
         if (curImg.width > maxHeight) { 
          curImg.height = Math.round(curImg.height * (maxWidth/curImg.width)); 
          curImg.width = maxWidth; 
         } 
        } 
       } 
       curImg.src = src; 
       if (i < nl.length - 1) { 
        var nli = nl.item(i + 1); 
        var nsrc = nli.getAttribute('src').toString(); 
        nextImg.src = nsrc; 
       } 
       Effect.Appear('slideShowImg', { 
        duration: 1 
       }); 

       t = setTimeout(nextImage, 7000); 
      } 

      function imageLoad() {} 

      function nextImage() { 
       slideShowImg.removeChild(curImg); 
       slideShowImg.setAttribute("style", "display:none"); 
       if (i < nl.length - 1) { 
        i++; 
        image(); 
       } else { 
        i = 0; 
        image(); 
       } 
      } 

      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //XML Loaded, create the slideshow 
       alert(xmlhttp.responseText); 
       image(); 
      } 
     }); 
    </script>