收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 14932|回复: 12

[讨论] DD_belatedPNG.js在ie6下存在的一些问题及修复

  [复制链接]
发表于 2011-11-16 18:28:10 | 显示全部楼层 |阅读模式
本帖最后由 liuxinghonglei 于 2011-11-16 18:29 编辑

很久之前在bolg发布了一篇ie6 png透明的帖子,用DD_belatedPNG这个js来实现,在论坛里也给好多帖子里面推荐了很多次,但是经过一段时间的使用发现存在很多的bug,尤其最近的项目,在ie6下面发现的bug尤其的多,所以想法解决解决,期间问了公司的大师同学和前前前公司的同事,把发现的问题都已经修正,以下列出的是用了DD_belatedPNG在ie6中遇见的问题:

1,页面是用iframe载入的 。页面里面的用DD_belatedPNG, 在ie6下会出现空白一大片,但是是占位的。
2,页面中的png图片有版本号,在ie6会出现不透明情况。
3,做滑动门背景图是png 需要透明,在ie6下hover会出现背景跑到屏幕左上角。
4,a用absolute 背景用png ,在ie6 hover效果同上(这个问题是根据记忆,没有具体写demo去测试)
5,<li><a href=""><img src="***.png"/></a></li> li只是浮动,ie6图片会跑到屏幕左上角。

在看了DD_belatedPNG的代码之后,发现1,3,4,5其实是同一个问题。
giveLayout: function (el) {
                el.style.zoom = 1;
                if (el.currentStyle.position == 'static') {
                    el.style.position = 'relative'
                    };
            }
        }

看了这个代码发现 只要position没有设置那么 DD_belatedPNG.JS 就会把position设置为relative;
我只是加了一个判断 去除一些标签,修改如下
giveLayout: function (el) {
                el.style.zoom = 1;
                if (el.currentStyle.position == 'static') {
                var tags=el.nodeName.toLowerCase();
                if(tags!='html' && tags!='a'&& tags!='img'){
                    el.style.position = 'relative'
                    };
            }
        }

这样修改 问题就解决了。
现在看第二个问题
2,页面中的png图片有版本号,在ie6会出现不透明情况。
下面是DD_belatedPNG 对判断是img的代码
if (el.nodeName == 'IMG') {
                        if(el.src.toLowerCase().search(/\.png$/) != -1) {
                                el.isImg = true;
                                el.style.visibility = 'hidden';
                        }

这段只是匹配了这张图片是不是png,但是如果图片加了版本号例如:logo.png?v=1321303913 这样的图片在ie6下就不会透明,这个问题是同事大师帮忙修改的,修改如下:
if (el.nodeName == 'IMG') {
                        if(/\.png(?:\W|$)/.test(el.src.toLowerCase())) {
                                el.isImg = true;
                                el.style.visibility = 'hidden';
                        }


以上的bug只是我用DD_belatedPNG在ie6下发现的问题,修改也只是我个人的一些想法和同事的帮忙,发出来只是和更多的用DD_belatedPNG童鞋一起讨论一起完善。如果有哪位童鞋发现了别的问题并解决,希望告之,3Q。

ps:14px童鞋说这个js的性能很低,这个问题我没有办法解决,我发现这个js里面用了很多的addRule()这个函数,我搜索下了这个函数,很多说法,是用了这个之后cup直线上升,我也没有找到可以替代的方法。
发表于 2011-11-17 08:55:57 | 显示全部楼层
性能低主要还是DXImageTransform.Microsoft.AlphaImageLoader滤镜造成的,滤镜会阻塞页面渲染;
可以尝试先加载图片,渲染完页面,再对需要透明的图片采用滤镜透明
回复 支持 反对

使用道具 举报

发表于 2011-11-17 09:38:55 | 显示全部楼层
这个dd的js好像还会和其他js冲突吧?
回复 支持 反对

使用道具 举报

发表于 2011-11-17 09:41:17 | 显示全部楼层
一直都不喜欢用之类的JS来让IE6实现PNG图的完美呈现,不划算。
我宁可转向一下,让IE6实现的效果改变改变。
回复 支持 反对

使用道具 举报

发表于 2011-11-29 15:31:34 | 显示全部楼层
本帖最后由 mylesshie 于 2011-11-29 15:33 编辑

今天遇到个问题
用table做的九宫格弹出层,边缘是半透明的,用DD始终没办法透明,边缘是用的半透明图片背景做的……请问楼主遇到过吗?何解呢?
回复 支持 反对

使用道具 举报

发表于 2011-11-29 16:08:38 | 显示全部楼层
3,做滑动门背景图是png 需要透明,在ie6下hover会出现背景跑到屏幕左上角。

把js放到页尾可以变好。我遇到并这么解决掉到,你试试呗
回复 支持 反对

使用道具 举报

发表于 2011-11-29 16:12:46 | 显示全部楼层
phantom 发表于 2011-11-17 09:41
一直都不喜欢用之类的JS来让IE6实现PNG图的完美呈现,不划算。
我宁可转向一下,让IE6实现的效果改变改变。 ...

支持此说法。
但现实是老板,产品,设计...什么的非要这个效果。
回复 支持 反对

使用道具 举报

发表于 2011-11-29 17:36:31 | 显示全部楼层
还有就是使用这个插件后,如果有滚动条的话(不是页面的滚动条,图片容器的滚动条)发现拖动滚动条图片不跟着动了!
回复 支持 反对

使用道具 举报

发表于 2012-5-24 16:48:06 | 显示全部楼层
楼主可不可以把已经改好的打个包。~
回复 支持 反对

使用道具 举报

发表于 2012-7-11 17:14:43 | 显示全部楼层
DD_belatedPNG.JS   在iframe里问题挺多的....
请教,为什么IE6刷新完,png背景图老是在左上角闪一下?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-7-11 17:16:21 | 显示全部楼层
luqingchen 发表于 2012-7-11 17:14
DD_belatedPNG.JS   在iframe里问题挺多的....
请教,为什么IE6刷新完,png背景图老是在左上角闪一下?

容器加个定位
回复 支持 反对

使用道具 举报

发表于 2012-7-12 11:09:44 | 显示全部楼层
大家应该一起努力,放弃IE6

这样不停的兼容,只会延长IE6的寿命

IE6下完全可以放弃一些效果,或是用gif图代替
回复 支持 反对

使用道具 举报

发表于 2013-8-27 15:08:04 | 显示全部楼层
DD_belatedPNG a:hover 问题有没有解决?网上找的解决方法:DD_belatedPNG.fix('.testimg,.logodiv a:hover');但是hover时图片会闪烁,而且图片会遮盖<a>标签内文字。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-30 07:07 , Processed in 0.202616 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表