Javascript延迟图像加载答案

【问题标题】：Javascript delayed image loadingJavascript延迟图像加载
【发布时间】：2010-10-15 07:21:49
【问题描述】：

我正在尝试使用纯 JS 延迟加载图像。我的方法是为图像提供空的 src 字段并将图像 url 插入到名为“lang”的临时属性中，如下例中使用的那样。即> <img lang="logo.gif"> 而不是 <img src="logo.gif">。当按下按钮时，下面的 js 会启动以将虚拟“lang”属性的值插入 src 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 存在问题。有什么想法吗？

【问题讨论】：

尝试使用 pics[i].style.display='block';而不是 pics[i].style.display='';
而不是 lang 使用 id 或 alt 任何有效的东西。
你有什么问题？我复制了您的代码并在 IE7、IE8 和 IE9 中运行，没有任何问题。

标签： javascript

【解决方案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

【讨论】：

【解决方案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);

【讨论】：