模糊的图像? Chrome上没有模糊图像,仅在IE / FF上...为什么?

时间:2012-10-02 16:51:50

标签: javascript html preload preloading

我一直在一个网站上工作,我已经广泛使用了文字图片的风格和外观,我想不是原生的html / css。所以你可以看到...很容易检测到图像中的文字是否会变得模糊不清。

一切都非常清晰,在Chrome上运行良好。但是,在IE或FF上加载页面后会出现问题。我的所有图像都会变得模糊,即使它们来回变焦等等。当时,在我的大脑中放入比必要图片更大的图片是有意义的,因为它会更清晰......但我想我完全是错误。希望一些大师可以尽快找到解决方案。提前谢谢!

上下文的一些示例代码:

            <div id="whiteBg">
            <img id="birdMain" src="Pictures/bird.png" alt="title"/>
            <img id="flowerMain1" src="Pictures/flower.png" alt="title"/>
            <img id="flowerMain2" src="Pictures/flower.png" alt="title"/>
            <img id="flowerMain3" src="Pictures/flower.png" alt="title"/>
            <img id="titleMain" src="Pictures/csaname.png" alt="title"/>
            <img id="csalogoMain" src="Pictures/csalogo.png" alt="asdf"/>
            </div>

我试图在拼命尝试修复解决方案时预加载图像,但这也没有做任何事情。我甚至不知道预加载代码行是否正常工作。

预加载代码:

    var images = new Array("Pictures/1greatwall.jpg", "Pictures/2spring-scrolls.jpg", "Pictures/3lily.jpg", "Pictures/4heavy-snow.jpg", "Pictures/5sunrise.jpg", "Pictures/6crane.jpg", "Pictures/7winding-road.jpg", "Pictures/8guqin.jpg", "Pictures/9sealflower.jpg", "Pictures/10pine.jpg", "Pictures/11huangshan.jpg", "Pictures/12dragon.jpg", "Pictures/13otters.jpg", "Pictures/1greatwall.jpg", "Pictures/14emei.jpg");
var imgNumber = 1;
var numberOfImg = images.length;
if (document.images) {

//loads slideshow picures
var image1 = new Image();
image1.src = "Pictures/1greatwall.jpg";
var image2 = new Image();
image2.src = "Pictures/2spring-scrolls.jpg";
var image3 = new Image();
image3.src = "Pictures/3lily.jpg";
var image4 = new Image();
image4.src = "Pictures/4heavy-snow.jpg";
var image5 = new Image();
image5.src = "Pictures/5sunrise.jpg";
var image6 = new Image();
image6.src = "Pictures/6crane.jpg";
var image7 = new Image();
image7.src = "Pictures/7winding-road.jpg";
var image8 = new Image();
image8.src = "Pictures/8guqin.jpg";
var image9 = new Image();
image9.src = "Pictures/9sealflower.jpg";
var image10 = new Image();
image10.src = "Pictures/10pine.jpg";
var image11 = new Image();
image11.src = "Pictures/11huangshan.jpg";
var image12 = new Image();
image12.src = "Pictures/12dragon.jpg";
var image13 = new Image();
image13.src = "Pictures/13otters.jpg";
var image14 = new Image();
image14.src = "Pictures/14emei.jpg";

//loads other essential background pictures...
var image15 = new Image();
image15.src = "Pictures/csalogo.jpg";
var image16 = new Image();
image16.src = "Pictures/bird.jpg";
var image17 = new Image();
image17.src = "Pictures/flower.jpg";
var image18 = new Image();
image18.src = "Pictures/csaname.jpg";
var image19 = new Image();
image19.src = "Pictures/seemorename.jpg";
var image20 = new Image();
image20.src = "Pictures/seemore.jpg";
var image21 = new Image();
image21.src = "Pictures/leftarrow.jpg";
var image22 = new Image();
image22.src = "Pictures/slideshowbutton.jpg";
var image23 = new Image();
image23.src = "Pictures/rightarrow.jpg";
var image24 = new Image();
image24.src = "Pictures/logo.jpg";
var image25 = new Image();
image25.src = "Pictures/menu.jpg";
var image26 = new Image();
image26.src = "Pictures/csa.jpg";
}

新笔记:

我发现在调整窗口大小/缩放后,图像本身的刷新将自动在Chrome上运行,但是,Firefox中不是这种情况。刚刚测试过造成这种情况的根本原因是什么?

1 个答案:

答案 0 :(得分:1)

此问题应在较新的浏览器版本中修复。