0

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

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

一些快速信息：

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

这个怎么运作：

该div属性Class="suggestions contextSuggesions"被插入到body元素中，并包含一个无序列表 ( ul, li, )，它在不透明度和单击图像 ( )ul之间切换。01mdiTog

下面是Mditog多次出现的图片，出现随机：

在此处输入图像描述

    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 浏览器中连续多次重新加载也是如此。

4

1 回答 1

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 () {
    …
});
于 2013-03-17T11:28:21.557 回答