我已经搜索了不同的网站,并不能完全弄清楚我哪里出错了。这适用于主流浏览器,但不适用于 IE7 或 IE8。我的问题是一旦加载图像,事件的源就为空。您会在页面上看到打印出来的内容(我有一个 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>