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

我在页面加载的时候加载一堆小缩略图,<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;">并不能解决问题。

看一个完整的实例

<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加载速度对网页整体加载的视觉影响了

时间: 2024-10-25 14:40:51

js图片延迟加载(兼容多浏览器)的相关文章

js图片延迟加载的实现方法及思路

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.   大概的实现方式是: 在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片. 然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来. 这 里比较麻烦地方是,如何计算i

js图片延迟加载的实现方法及思路_javascript技巧

大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏_javascript技巧

现在的浏览器越来越多,这就使得网页设计的兼容性要求越来越高,像常用的设为首页.加入收藏代码,一般的虽然简洁,但兼容性却非常不好,加入收藏和设为首页代码几乎各个网站都在头部放上一个,有没有效果先不管,需求应该是有的. 但是由于浏览器的兼容性问题,之前用的很多代码都失去效果,下面就给出一段能够兼容各个浏览器的代码,也不能够算是兼容,只能说在不支持的浏览器中能够给出提示,代码如下: <!doctype html> <html> <head> <title>加入收藏

完美兼容多浏览器的js判断图片路径代码汇总_javascript技巧

第一种方式 //检查图片是否存在 function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片,则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { alert(imgurl + '存在'); } else { alert(imgurl +

360浏览器不兼容-关于图片滚动在不同浏览器中部兼容的问题

问题描述 关于图片滚动在不同浏览器中部兼容的问题 这是用dw做的框架 实际代码 var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length, st = new SlideTrans("idContainer2", "idSlider2", n, { onStart: function(){//设置按钮样式 forEach(nums, f

JS实现兼容各浏览器解析XML文档数据的方法

  本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法.分享给大家供大家参考.具体分析如下: 网站上很多用JS解析XML文档的资料或多或少都有点问题, 以下是自己总结的代码,用来解析XML文档,兼容各个浏览器. parseXMLDOM.js代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

js操作iframe兼容各种主流浏览器示例代码

遇到了操作iframe的相关问题,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数,下面与大家分享下操作iframe兼容各种浏览器的方法   在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过. 父页面parent.html的代码如下 复制代码 代码如下: <html xmlns="http://www.w3.or

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

 HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列  本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例,非常的实用,特别是在BS架构的企业级应用,有需要的小伙伴可以参考下.     BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使

兼容主流浏览器的iframe自适应高度js脚本

 兼容主流浏览器的 iframe 自适应高度,很实用的,具体的js脚本如下,感兴趣的朋友可不要错过  兼容主流浏览器的 Iframe 自适应高度,js脚本如下:   代码如下: //iframe 高度自适应  function iframeAutoFit(iframeObj) {  setTimeout(function () {  if (!iframeObj) return;  iframeObj.height = (iframeObj.Document ? iframeObj.Docume