Question

我正在尝试使用普通JS来延迟加载图像。我的方法是为图像提供空的src字段，并将图像url插入名为“lang”的temp属性，如下例所示。即> <img lang="logo.gif">代替<img src="logo.gif">。当按下按钮时，启动下面的js以向src attr插入虚拟“lang”attr的值。

function showimagesunderdiv(divid)
{
 tr = document.getElementById(divid);
 pics=tr.getElementsByTagName('img');
 for(i=0;i<pics.length;i++)
  {
  if(pics[i].lang)
   {
   pics[i].src=pics[i].lang;
   pics[i].style.display='';
   }
  }
}

虽然这是有效的Chrome和FF，IE正在出现问题。有什么想法吗？

Answer 1

也许这个：

<html>
<body>
<p>Images:</p>
<img name=image0>
<img name=image1>
<img name=image2>
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
function LoadImage(imageName,imageFile)
{
  if (!document.images) return;
  document.images[imageName].src = imageFile';
}
LoadImage('image4','number4.gif');
LoadImage('image5','number5.gif');
LoadImage('image6','number6.gif');
LoadImage('image7','number7.gif');
</script>
</html>

或者这个：

<html>
<body>
<p>Images:</p>
<img name=image0 onLoad="LoadImage('image1','number1.gif')">
<img name=image1 onLoad="LoadImage('image2','number2.gif')">
<img name=image2 onLoad="LoadImage('image3','number3.gif')">
<img name=image3>
End of document body.
</body>
<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('image0','number0.gif');
</script>
</html>

我知道这不是对你的代码的更正，但我看不出什么错误......

这是一个非常兼容的解决方案！

希望它有所帮助！资源：

http://www.cryer.co.uk/resources/javascript/script3.htm

Answer 2

为每个图像标记指定一个ID，将ID和URL存储在一个数组中：

imagesToLoad = [["imgId1", "http://..."], ["imgId2", "..."], ...];

并使用：

function showimages(imageList)
{
  for(var x = 0; x < imageList.length; x++) {
    document.getElementById(imageList[x][0]).src = imageList[x][1];
  }
}

showImages(imagesToLoad);

Javascript延迟图像加载

2 个答案: