problem preloading images in ie 6

Discussion in 'JavaScript' started by robg, Jan 28, 2009.

0
  1. #1
    HI, just starting to learn JS but can't figure this one out. Have tried the search engines for a solution but cant find any fixes. It works in all other browsers but not ie6.

    Basically I want a background images to change when a user clicks on a certain radio button.

    in my header i call the following js: 

    var myImgs = ['http://mysite.co.uk/images/general_images/picture1bg.jpg', 'http://mysite.co.uk/images/general_images/picture2bg.jpg', 'http://mysite.co.uk/images/general_images/picture3bg.jpg', 'http://mysite.co.uk/images/general_images/picture4bg.jpg', 'http://mysite.co.uk/images/general_images/picture5bg.jpg', 'http://mysite.co.uk/images/general_images/picture6bg.jpg'];

function preload(imgs) {
    var img;
    for (var i = 0, len = imgs.length; i < len; ++i) {
        img = new Image(240,350);
        img.src = imgs[i];
    }
}

preload(myImgs);

function loadSelctedPictureBg(selected)
{
    var img = selected.value;
    document.getElementById("product_single_img").style.background = "url(http://mysite.co.uk/images/general_images/picture" + img + "bg.jpg)";
}
    Code (markup):
    each radio button has this:
    onClick='loadSelctedPictureBg(this)
    Code (markup):
    Hope someone can help. Thanks
     
    robg, Jan 28, 2009 IP
  2. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Hi robg,
    the code you posted works fine, there has to be other error on IE, that makes the script not working. Can you check the useless error message in IE? Maybe it will tell you something. Or you can post it here.
     
    lp1051, Jan 28, 2009 IP
  3. robg

    robg Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    sorry, im new to JS. How would i check the error message?
     
    robg, Jan 28, 2009 IP
  4. lp1051

    lp1051 Well-Known Member

    Messages:
    163
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #4
    in the left bottom corner of IE should be yellow warning icon - double click on that and expand the report. Can you see something?
     
    lp1051, Jan 28, 2009 IP
  5. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #5
    erm - not sure if this is applicable but - IE6 does NOT cache / preload background images. for instance, css of:

    .foo {
    background-image: url(/blahblah.png) no-repeat;
    }

    blahblah.png will NOT be cached and will always be downloaded from scratch upon pageload or reinstantiation of the class (effectively, this is what you do).

    another thing you want to do is use the backgroundImage property instead of just background - may work although I doubt it - from what I gather, the image changes, just that it does so slowly ...

    however - there is a way to enable your IE6 cache for background images:
    //enables background image cache for internet explorer 6
if (window.ie6) try {document.execCommand("BackgroundImageCache", false, true);} catch(e){};
    PHP:
    this is from the mootools 1.11 framework, obviously window.ie6 is a property set by the framework, you do your own browser detection.
     
    dimitar christoff, Jan 29, 2009 IP