Internet Explore 8 won't change image src with .attr()

问题

I have set up a page which will flick through a sequence of images as the user scrolls with their mouse or trackpad. I'm using jQuery to measure the distance from the top of the page - scrollTop() - to then change the image source for a particular id in the DOM.

This is working perfectly in Firefox, Chrome, Safari, Opera, IE9 and also on the iPad, iPhone, etc. HOWEVER, it doesn't work in IE8.

This is the HTML:

<div id="flipping-container">
    <img id="flipping-id" class="flippingTarget" src="imageOne.png" alt="imageone" />
</div>

This is the JS:

$(document).scroll(function() {
    var toTop = $(document).scrollTop();
    if (toTop <= 340) {
            $('.flippingTarget').attr('src','imageOne.png');
    }
    else if ((toTop <= 392) && (toTop > 341)){
            $('.flippingTarget').attr('src','imageTwo.png');
    }
    else if ((toTop <= 445) && (toTop >= 393)){
            $('.flippingTarget').attr('src','imageThree.png');
    }

// AND SO ON
// ENDING WITH...

    else {
            $('.flipping-target').attr('src','image1.png');
    };
});

The div ID of "flipping-container" is given a CSS value of position:fixed; so it is always visible.

I have poured through StackOverflow posts and not managed to find a working solution as yet. The scrollTop() value is being read perfectly fine as I have click events on buttons which will smoothly scroll the page to a div and/or a number of pixels from top. IE8 is fine with this, so it's not the html/body/document/window scrollTop() issue.

I have switched out the .attr() value for .addClass() to see if that will be picked up. But it doesn't in IE8. So it may not be directly related to the src attribute itself. I've double checked my class names and targets and they're all fine (also proven by the other browsers perform as intended).

Any clues? Any help would be much appreciated.

来源：https://stackoverflow.com/questions/12107487/internet-explore-8-wont-change-image-src-with-attr

标签

jquery

internet-explorer-8

src

scrolltop