Question

我不明白为什么onload方法（参见下面的代码）在连续重新加载的IE8和IE9浏览器中不止一次调用它。

我想，在 IE8，IE9 中，onload方法不止一次被触发，导致此图像多次出现render(appear)。 js代码下面是我的高级Front-Ender编写的（他使用自己编写的js库来处理所有.append()，anim()，......方法。代码在Firefox，Chrome中按预期工作，但image(html code)在使用IE8或IE9浏览器重新加载时不止一次呈现。

一些快速信息：

waitingFor() - 定期扫描dom以查找匹配的元素，
mdiTog - 不止一次出现的图片..

工作原理：

div属性Class="suggestions contextSuggesions"已插入body元素，并包含无序列表（ul，li，ul）如果您点击图片（0），则会在不透明度1和mdiTog之间切换。

下面是Mditog出现不止一次的图像，它的外观是随机的：

enter image description here

    waitingFor('.viewport .homePage', function () {
    var mdiTog = new Image();
    mdiTog.onload = function () {
        var $mdi = M$('.mdiTabs ul'),
            $contextMenu = M$($body.append('<div class="suggestions contextSuggesions" style="display:none"></div>')),
            $toggle = M$($mdi.append('<li class="mdiTog" style="display:none"></li>')),
            visible = false,
            active = false;

        var hideCtx = function () {
            if (visible) {
                $contextMenu.anim('', {opacity: 100}, {opacity: 0}, 250, function () {
                    $contextMenu.css({display: 'none'});
                });
                visible = false;
            }
        };              

        $toggle.css({opacity: 0, display: 'inline-block'}).anim('', {opacity: 0}, {opacity: 100}, 1000).on('click', function () {
            var togOS = $toggle.offset(),
                menu = '';

            M$('li', $mdi.get()).each(function (el, idx) {
                if (idx > 1) {
                    menu += '<li rel="' + idx + '">' + $mdi.text(null, el) + '</li>';                   
                }
            });

            $contextMenu.css({opacity: 0, display: 'block', top: togOS.top + 'px', left: (togOS.left - 20) + 'px'}).anim('', {opacity: 0}, {opacity: 100}, 400, function () {
                visible = true;
            }).html('<ul>' + menu + '<li class="uiUtil hr" onclick="ApolloUI.widgets.expose.show()">' + translate('previewAll') + '</li><li class="uiUtil" onclick="ApolloUI.mdi.closeAll()">' + translate('closeAll') + '</li></ul>');
        });

        $contextMenu.on('click', function (e) {
            var target = $contextMenu.eventTarget(e);

            if (target.tagName === 'LI' && target.className.indexOf('uiUtil') === -1) {
                $contextMenu.fire('click', M$('.mdiTabs li').get(parseInt(target.getAttribute('rel'), 10)));
            }
            hideCtx();              
        }).on('mouseleave', function () {
            active = false;
        }).on('mouseenter', function () {
            active = true;
        });

        setInterval(function () {
            if (!active && visible) {
                hideCtx();
            }
        }, 1000);
    };
    mdiTog.src = 'media/img/ico_16_context.png';
});

我必须尽快关闭此问题，因此欢迎在此代码中进行任何建议/修改/添加以强制onload仅在IE8 / IE9浏览器中连续几次重新加载时执行一次。

Answer 1

如果onload触发两次，你应该使用一个警卫来多次执行处理程序：

var mdiTog = new Image();
var hasFired = false;
mdiTog.onload = function () {
   if (hasFired)
       return;
   hasFired = true;

   …
};

或者，如果您使用类似jQuery的库，则可以尝试使用one事件绑定方法：

var mdiTog = new Image();
M$(mdiTog).one("load", function () {
    …
});

连续重新加载到应用程序时，Onload方法不止一次调用自身（var image = new Image（），javascript issue）

1 个答案: