js图片延迟加载（兼容多浏览器)

这一款网页特效图片延迟加载，兼容ie6,7,8,firefox等，主要是通过网页特效 settimeout来实现等网页加载完后再来加载图片哦。

我在页面加载的时候加载一堆小缩略图，<a href="网页特效:void(0);" onclick="switch_image('1.jpg')"><img src="1.thumb.jpg" /></a>
这么多小的缩略图标签循环平铺下来，当单击小的图片时，动态加载大的图片显示，就类似于淘宝的商品查看图片。页面上有一个标签：
<div id="pic-box"><img src="" id="big-image" /></div>
为了节省流量，加快页面载入速度，先不加载大图，当用户单击小图时，动态加载一张大图显示。
复制代码代码如下:

<script>
function switch_image(im)
{
document.getelementbyid('big-image').src=im;
}
</script>

这种方式在ie6,7外所有的浏览器工作都正常，比如 ie8,firefox, opera, chrome, safari。。。
就是ie6,7这两个浏览器加载不了，单击小图的时候，有时候你能加载，有时候加载一半，有时候不能加载。
我以为问题出在src这个东西上面，有可能ie6,7修改src不能正确加载图片，于是尝试把切换函数修改为：
document.getelementbyid('pic-box').innerhtml='<img src="' + im + '" />';
ie6,7还是不行，于是想，有可能是图片被缓存了，那么加上随机数：
document.getelementbyid('pic-box').innerhtml='<img src="' + im + '?r=' + math.random() + '" />';
ie6,7依然不行。。
于是在想，可能是img用在innerhtml里面出现的问题，所以，改成用 appendchild
var img = document.createelement('img');
img.src= im;
document.getelementbyid('pic-box').appendchild(img);
还是不行。
再修改成用 new image来：

var img = new image();
img.src= im;
document.getelementbyid('pic-box').appendchild(img);
还是不行。
百思不得其解，想，难道ie6,7不能动态加载图片吗？难道是img标签的问题？
既然这样就换成背景图加载吧，于是
document.getelementbyid('pic-box').style.background="url(" + im + ")";
ie6,7依然不行，上面这么多方法除ie6,7外其他都是正常的。
只有不停的google，结果google到了：
ie6,7只有在用<a onclick="switch_image()" href="网页特效:void(0);"></a>这样
动态加载图片是才会出现这种情况，google到的一篇说明：

有几个吃饱了没事儿干的老外反复试验发现这个问题是ie6中一个底层机制的bug，之后的版本已经解决了。
据说<a href="javascript:void(0)">或者<a href=#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为，
导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了。
当然这些吃饱了没事儿干的老外们也提出了各种匪夷所思复杂无比的解决方案。

最简单的方法有两个，一个是这样使用a标签<a href="switch_image(); return false;">，另外一个就是用div替换a标签来用。

实际上我发现不仅是ie6，ie7也同样有这个bug，还有，采用：<a href="switch_image(); return false;">并不能解决问题。

看一个完整的js图片延迟加载实例

<script>
function chkdiv(divid){
var chkid=document.getelementbyid(divid);
if(chkid != null)
{return true; }
else
{return false; }
}
if (chkdiv('demob')) {
document.getelementbyid('demob').innerhtml= document.getelementbyid('demob_hidden').innerhtml;
document.getelementbyid('demob_hidden').innerhtml="";
}
</script>

其中id为demob的div是网页中间的原来放js调用地方，下面的隐藏的id为demob_hidden的div及后面的js代码放在网页最后面，这样在网页内容大部分加载完后再加载隐藏div中的js调用，然后再用后面的函数赋给demob，这样能减少外部js加载速度对网页整体加载的视觉影响了

补充：网页制作,js教程