关于我正在尝试做的一些事情：
在 window.onload 这个页面将 AJAX 调用另一个 php 页面并得到一个 base64 编码的图像作为响应。这工作正常。一旦图像通过 AJAX 返回，它就会被设置为 'img1' 的 src。另外，工作还不错。该图像还因为 maphilight 有一个区域地图，其坐标也使用相同的 AJAX 调用进行拉取和设置。正是在这里，maphilight 并没有开始在 Internet Explorer 上工作。我已经在所有其他浏览器上对其进行了测试，并且突出显示效果很好。我的问题是如何让亮点在 Internet Explorer 上工作。我在这里和各处搜索了几天，并尝试了一些有趣的事情：尝试首先调用加载事件，在页面加载后将 .js 文件附加到头部，检查图像加载然后运行 jquery 插件，全部徒劳无功。
wrap = $('<div></div>').css({
display:'block',
background: 'url("' + this.src + '")',
position:'relative',
padding:0,
width:this.width,
height:this.height
});
在调用 window.onload 函数并进行 AJAX 调用以检索 base64 图像之前，img.src 是空白的。以下是调用的函数及其在页面上的显示方式：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.maphilight.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.maphilight.defaults = {
fill: true,
fillColor: 'ffffff',
fillOpacity: 0.5,
stroke: true,
strokeColor: '0055bb',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
$('img[usemap]').maphilight();
});
window.onload = function(){
ajaxFunction();
}
var ttxx = new Array();
function ajaxFunction(){
var ajaxRequest; // Start Ajax Request
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Something went wrong
alert('Your browser broke!');
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var resp = ajaxRequest.responseText;
var spl = resp.split('SECIMG'); // response received divide it up to get all vars
thei = spl[0]; // get img src1 (img to be hilighted)
var rest = spl[1]; // get rest of request
var im = document.getElementById('img1');// set var for img name
im.src = thei; // set img1 src as base64 code recived
var spl3 = rest.split('eb');
var tx = spl3[0]; // get txt values
var coor = spl3[1]; // get coordinates
var ttx = tx.split(':');
for (u = 0; u< 8; u++){
var ne = u + 1;
ttxx[ne] = ttx[u];
}
var mid = '100,100'; // set coordinates
var indiv = coor.split('ec');
for (i = 0; i< 8; i++){
var coord = indiv[i];
var fullcoor = coord + ',' + mid;
var upone = i + 1;
var are = document.getElementById('ar' + upone);
are.coords = fullcoor; //coordinates set
}
}
}
ajaxRequest.open('GET', 'testajaximg.php', true);
ajaxRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
ajaxRequest.setRequestHeader('Authorization', 'GetCap');
ajaxRequest.send(null);
} // obviously set AJAX request
</script></head>
由于空间和时间的限制，我不会包括其他功能，但这些功能都可以正常工作。（即单击地图区域并发送警报）
这是显示图像的页面主体部分的 HTML 代码（在 php 中）：
<img id="img1" border="0" usemap="#cap"><br><br> /*img put here */
<map name="cap">";
$huy = 1;
$enlop = 8;
while ($huy <= $enlop){
echo"<area shape="polygon" id="ar".$huy."\" coords="" onclick=javascript:alert('Hello'".$huy."');">";
$huy++;
}
echo"</map>";
我知道图像已设置，因为它已显示，并且我知道坐标和区域已设置，因为警报会根据您单击图像的位置而引发。图像加载太快而无法由 javascript 加载，还是 javascript 加载原始图像 src 而不会进入新图像？任何帮助将不胜感激。您可以在我的网站上看到代码的实时版本：
http://www.securacap.com/testajax2.php
再次感谢您对这种情况的任何启示。我宁愿不使用像 imagesLoaded 这样的插件，因为我已经有太多的插件和脚本了！尽量保持简单。