0

I have been working on a website, and I've used pictures of texts extensively for the style and looks that i wanted not native to html/css. So as you can see... it's very easy to detect if the text in the image gets blurry any one bit.

Everything is super clear and works fine on Chrome. However, the problem occurs after the page is done loading on IE or FF. All my images become blurry forever, even if they zoom back and forth etc. At the time, in my brain it made sense to put in larger than necessary pictures because it'll be more clear... but I guess I'm totally wrong. Hope some guru can have a solution to this soon. Thanks in advance!

Some Sample Code for Context:

            <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>

I tried preloading the images in a desperate attempt to fix the solution, but that didn't do anything either. I don't even know if the preloading lines of code are working at all.

Preloading Code:

    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";
}

NEW NOTES:

I found out that the refreshing of the images itself after resizing/zooming of the window will work automatically on Chrome, however, this is not the case in Firefox. Just tested. What is the root cause for this?

tshepang
  • 12,111
  • 21
  • 91
  • 136
Charles
  • 450
  • 1
  • 4
  • 20
  • 1
    This isn't related to your problem, but why are you creating an array of all the image paths only to completely disregard it and declare each image manually? – Shmiddty Oct 02 '12 at 16:54
  • 1
    @Shmiddty Because I'm actually implementing a picture slideshow using most of the images that I preloaded. I thought that adding the the images from 15-26 would fix the blurriness issue at the time. – Charles Oct 02 '12 at 16:59
  • 1
    But anyways the way I understood it, was I used the array to loop with with my photoslide show. However the declaring the images part is what is actually preloading the images if I am not wrong, because the array itself is only strings of data not images. – Charles Oct 02 '12 at 17:01
  • What I'm saying is, why are you writing: `var image1 = new Image(); image1.src = "Pictures/1greatwall.jpg";...` A bunch of times instead of just looping over the Array you declared with all of these values? – Shmiddty Oct 02 '12 at 17:12
  • 1
    good point... I just copied this from an example... ty for the comment. – Charles Oct 02 '12 at 17:36

1 Answers1

1

This issue should be fixed in the newer browser versions.