Fatal编程技术网
  • javascript/
  • Javascript 另一个IE8映像加载问题

Javascript 另一个IE8映像加载问题

javascript image internet-explorer-8

Javascript 另一个IE8映像加载问题,javascript,image,internet-explorer-8,onload-event,Javascript,Image,Internet Explorer 8,Onload Event,我在不同的网站上搜索过，不知道哪里出错了。这适用于主流浏览器，但不适用于IE7或IE8。我的问题是，一旦加载映像，事件源就为null。你会在页面上看到打印出来的内容（我在一个div中发送了一些文本）。这是我的密码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="tex

我在不同的网站上搜索过，不知道哪里出错了。这适用于主流浏览器，但不适用于IE7或IE8。我的问题是，一旦加载映像，事件源就为null。你会在页面上看到打印出来的内容（我在一个div中发送了一些文本）。这是我的密码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    var panorama = new Object();
    var mainContainer;
    var panoHolder;
    var panoCanvas;
    //once document is loaded starts website
    AttachEvent(window, 'load', eventWindowLoaded);

    // logic to attach the event correctly in IE
    function AttachEvent(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
        } else {
            element['on' + type] = handler;
        }
    }

    function eventWindowLoaded() {
        panorama.totalpanels = 6;
        panorama.sourceLocation = "my_files/images/";
        panorama.width = 3200;
        panorama.height = 964;
        panorama.thumbnails = new Object();
        panorama.thumbnails.images = new Array(panorama.totalpanels);
        panorama.thumbnails.imageWidths = new Array();
        panorama.thumbnails.imageHeight = 0;

        //sets attributes of container objects
        mainContainer = document.createElement("div");
        mainContainer.id = "container";
        mainContainer.style.width = "1010px";
        mainContainer.style.height = panorama.height + "px";

        obj("mainelement").appendChild(mainContainer);

        panoHolder = document.createElement("div");
        panoHolder.id = "animationholder";
        panoHolder.style.width = panorama.width + "px";
        panoHolder.style.height = panorama.height + "px";
        panoHolder.style.left = '0px';
        panoHolder.style.top = "0px";
        mainContainer.appendChild(panoHolder);

        panoCanvas = document.createElement("div");
        panoCanvas.id = "room";
        panoCanvas.width = panorama.width;
        panoCanvas.height = panorama.height;
        panoHolder.appendChild(panoCanvas);

        for(var i = 1; i <= panorama.totalpanels; i++) {
            panorama.thumbnails.images[i - 1] = new Image();
            AttachEvent(panorama.thumbnails.images[i - 1], 'load'preloadThumbnails);
            panorama.thumbnails.images[i - 1].src = panorama.sourceLocation + "TC_tile_thumb" + i + ".jpg";
            panorama.thumbnails.images[i - 1].id = i - 1;
        }
    }

    function preloadThumbnails(e) {
        panorama.thumbnails.loaded++;
        //adds width and height attributes to panorama.thumbnails.imageWidths array
        try {
            panorama.thumbnails.imageWidths.push(e.currentTarget ? e.currentTarget.width : window.event.srcElement.width);
            panorama.thumbnails.imageHeight = e.currentTarget.height;
            panoCanvas.appendChild(e.currentTarget);
        }
        catch (ee) {
            var targ;
            if (!e) var e = window.event;
            if (e.currentTarget) targ = e.currentTarget;
            else if (e.srcElement) targ = e.srcElement;
            t('<br /> error: ' + ee + '<br /> event: ' + e + '<br /> target: ' + targ + '<br />' + e[0], true);
        }

        if (panorama.thumbnails.loaded >= panorama.totalpanels) {
            e.currentTarget.removeEventListener('load', preloadThumbnails , false);
            startFullRezPreload();
        }   
    }
    //returns an object reference
    function obj(element) {
        return document.getElementById(element);
    }

    function t(message, addTo) {
        if (addTo) {
            obj("test").innerHTML += message;
        }
        else {
            obj("test").innerHTML = message;
        }
    }
</script>
</head>

<body id="mainelement">
<div id="test">Test</div>
</body>
</html>


无标题文件
var panorama=新对象（）；
var主容器；
风险值持有人；
帆布；
//文档加载后，网站将启动
AttachEvent（窗口“加载”，事件窗口加载）；
//在IE中正确附加事件的逻辑
函数AttachEvent（元素、类型、处理程序）{
if（element.addEventListener）{
元素。addEventListener（类型、处理程序、false）；
}else if（元素附件）{
元素.attachEvent（'on'+类型，处理程序）
}否则{
元素['on'+类型]=处理程序；
}
}
函数eventWindowLoaded（）{
panorama.totalpanels=6；
panorama.sourceLocation=“我的文件/图像/”；
panorama.width=3200；
全景高度=964；
panorama.thumbnails=新对象（）；
panorama.thumbnails.images=新数组（panorama.totalpanels）；
panorama.thumbnails.imageWidths=新数组（）；
panorama.thumbnails.imageHeight=0；
//设置容器对象的属性
mainContainer=document.createElement（“div”）；
mainContainer.id=“container”；
mainContainer.style.width=“1010px”；
mainContainer.style.height=panorama.height+“px”；
obj（“主元素”）.appendChild（主容器）；
panoHolder=document.createElement（“div”）；
panoHolder.id=“animationholder”；
panoHolder.style.width=panorama.width+“px”；
panoHolder.style.height=panorama.height+“px”；
panoHolder.style.left='0px'；
panoHolder.style.top=“0px”；
主容器。附加子容器（panoHolder）；
panoCanvas=document.createElement（“div”）；
panovanvas.id=“房间”；
panoracanvas.width=panorama.width；
panoracanvas.height=panorama.height；
panoHolder.appendChild（panoCanvas）；
对于（变量i=1；i=panorama.totalpanels）{
e、 currentTarget.removeEventListener（'load'，preloadThumbnails，false）；
startFullRezPreload（）；
}   
}
//返回一个对象引用
功能obj（元素）{
返回单据.getElementById（元素）；
}
函数t（消息，添加到）{
如果（添加到）{
obj（“test”）.innerHTML+=消息；
}
否则{
obj（“test”）.innerHTML=消息；
}
}
试验
Internet Explorer（旧版本）未将事件对象作为参数传递。它存储在名为“事件”的全局（窗口）属性中

传统方法是在事件处理程序的顶部执行以下操作：

    function preloadThumbnails(e) {
      e = e || window.event;
我将这一行从catch移到第一行：if（！e）var e=window.event；尽管如此，我在跟踪时仍然会遇到这样的问题：error:TypeError:无法获取未定义或空引用事件的属性“width”：[object event]target:undefinedDon不要在那里用
var
重新声明“e”。Internet Explorer“事件”对象与其他浏览器中的对象不同；特别是，它不是“target”，而是“srcelment”。是的，我用相同的结果（target==null）重新编码了函数的第一部分：
函数预加载缩略图（e）{e=e | | window.event；var target；if（e.currentTarget）target=e.currentTarget；else if（e.srcelment）targ=e.srcElement；
@StephenSynowsky好吧，也许IE只是没有为图像上的“加载”事件填充“srcElement”属性。这就是我开始思考的。我切换到jQuery，一切都解决了！
panorama.thumbnails.images[I-1]=$（'