Does not work [removed] in IE8

2019-09-08 12:29发布

问题:

I have a pretty simple image switcher, which I use for manual images switcher and for carousel. In IE 8 it works strange. In carousel scenario image switches just once, thereafter it's dies. But (!) when I implemented Firebug Lite and try to trace - it's works well, only with firebug on... I tried some tricks, I found, but it's all to no purpose. I have no idea what caused this kind of behavior. How to fix it?

js

function toSlide(wrapper, options){
    var active = $('#' + wrapper + ' div.active');
    var slide;
    var direction;

    if (active.length === 0){
        active = $('#' + wrapper + ' div:last');
    }

    if (options === null) {
        options = {};
        options.reverse = false;
        options.animate = false;
    } else {
        options.reverse = options.reverse === null ? false : options.reverse;
        options.animate = options.animate === null ? false : options.animate;
    }

    direction = options.reverse === true ? active.prev() : active.next();

    slide = direction.length ? direction : $('#' + wrapper + ' div:first');

    if (options.animate === true){
        active.addClass('last-active');

        slide.addClass('active')
            .css({opacity:0.0})
            .animate({opacity:1.0}, 1000, function() {            
                active.removeClass('active last-active');
        });
    } else {        
        slide.addClass('active');
        active.removeClass('active');
    }
}

function startSlideShow() {
    setInterval(function(){ toSlide('slideshow', {'animate': true}); }, 5000);
};

window.onload = function() {  
    if (document.location.pathname == '/'){startSlideShow();};
};

html in head

<!--[if IE 8 ]>  
<link rel="stylesheet" href="{{ MEDIA_URL }}css/ie8.css" type="text/css" media="screen, projection" />  <html lang="en" class="no-js ie8"> 
<script defer src="ie_onload.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="{{ MEDIA_URL }}js/jquery-1.6.2.js"%3E%3C/script%3E'))</script> 
<script type="text/javascript" src="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js"></script>
<![endif]-->

in bottom of html

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ MEDIA_URL }}js/jquery-1.4.2.js"%3E%3C/script%3E'))</script> -->

<!-- scripts concatenated and minified via ant build script-->
<script src="{{ MEDIA_URL }}js/plugins.js"></script>
<script src="{{ MEDIA_URL }}js/script.js"></script>
<!-- end concatenated and minified scripts-->

回答1:

Accessing console in FF without Firebug open or in IE will result in an error that will block the rest of your JS from executing. If you want to leave calls to console in, you should implement them like one of the following:

try { console.log('blah'); } catch(e) {}
// or
if (typeof console != 'undefined') console.log('blah');

Or use a custom built logging function that implements something like the above.



回答2:

The cause was non-functional window.onload in IE8. I did right trick but made stupid mistake. So, I fixed it:

was

<!--[if IE 8 ]>
    <script defer src="ie_onload.js"></script>
<![endif]-->

is now

<!--[if IE 8 ]>  
    <script defer src="{{ MEDIA_URL }}js/ie_onload.js"></script>
<![endif]-->

in ie_onload.js

document.body.onload = function() {
    imageViewer();
    // and other functions
};