Question

我编写了以下代码来更改鼠标悬停图像：

<script language="Javascript">
<!--
function ShowPicture(id) {

var css = '.test1 a:hover:after{content: url(_images/recurring/'+id+'); }';
style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>

它在Chrome上完美运行，但是一旦IE8点击此脚本，它就会停止整个页面的轨道。处理这个问题的最佳方法是什么？是否有一些相当于：if（internetexplorer8 == true）命令？或者脚本本身是否有缺陷，但是Chrome允许它继续运行？

Answer 1

有一个与IE 8的createTextNode相关的已知错误。 IE 8 and 7 bug when dynamically adding a stylesheet

由于您已经在使用Javascript，因此通过将CSS引入混合来增加复杂性没有任何优势。

您基本上可以循环遍历所有图像，将原始源作为数据属性存储在图像上，并将侦听器附加到在其与翻转之间交换的图像。

以下代码可以进行一些修改。

window.addEventListener('load', function(e) {
    //preload image to prevent flicker

    var imgs = document.getElementsByTagName('img');
    //loop 

    for (var i = 0; i < imgs.length; i++) {
        //add your code here to determing rollover original/replacement binding, my example is hard coded
        var rolloverSrc = 'https://farm3.staticflickr.com/2852/9704174376_b5c406c710_q.jpg';
        //preloading img into memory
        var preloadImg = document.createElement('img');
        preloadImg.src = rolloverSrc;
        //Alias varaible to keep in scope for listeners
        var img = imgs[i];

        preloadImg.addEventListener('load', function(e) {
            //Attach rollover events after image preloads
            img.addEventListener('mouseover', function(e) {
                this.setAttribute('data-orginal-src', this.src);
                this.src = rolloverSrc;

            }, false);

            img.addEventListener('mouseout', function(e) {
                var original = this.getAttribute('data-orginal-src');
                this.src = original;

            }, false);
        }, false);

    }
}, false);

您可以在此处查看：https://jsbin.com/juladaq/edit?js,console,output

javascript导致Internet Explorer 8停止运行

1 个答案: