页面首次加载ImageMap坐标变NaN，需多次刷新才正常【已解决】

场景与代码实现 #

在PHP+HTML搭建的站点中，使用了如下图片映射结构：

<img id="imgMap" src="<?php echo $vett['IMG'] ?>" style='max-width:100%; max-height:100%; padding-bottom: 10%' border="1" usemap="#Map"/>
<?php if ($lcz == 100500) {  ?>
    <map name="Map" id="Map">
        <area shape="rect" coords="571,838,369,710" href="main.php?lcz=100501"
              onmousemove="showToolTip(event,'<?php echo $vett[100501] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="901,830,674,718" href="main.php?lcz=100502"
              onmousemove="showToolTip(event,'<?php echo $vett[100502] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="684,572,457,460" href="main.php?lcz=100503"
              onmousemove="showToolTip(event,'<?php echo $vett[100503] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="878,427,651,315" href="main.php?lcz=100504"
              onmousemove="showToolTip(event,'<?php echo $vett[100504] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="1020,651,908,547" href="main.php?lcz=100505"
              onmousemove="showToolTip(event,'<?php echo $vett[100505] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="1219,897,1107,793" href="main.php?lcz=100506"
              onmousemove="showToolTip(event,'<?php echo $vett[100506] ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="1475,769,1363,665" href="main.php?lcz=100507"
              onmousemove="showToolTip(event,'<?php echo addslashes($vett[100507]) ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="1214,593,1102,489" href="main.php?lcz=100508"
              onmousemove="showToolTip(event,'<?php echo addslashes($vett[100508]) ?>');return false"
              onmouseout="hideToolTip()"/>
        <area shape="rect" coords="1451,309,1193,188" href="main.php?lcz=100509"
              onmousemove="showToolTip(event,'<?php echo addslashes($vett[100509]) ?>');return false"
              onmouseout="hideToolTip()"/>
    </map>
<?php } ?>

同时编写了JavaScript的ImageMap类，用于图片缩放时同步调整map坐标：

var ImageMap = function (map) {
    var n,
        areas = map.getElementsByTagName('area'),
        len = areas.length,
        coords = [],
        previousWidth = document.getElementById('imgMap').naturalWidth;
    for (n = 0; n < len; n++) {
        coords[n] = areas[n].coords.split(',');
    }
    this.resize = function () {
        var n, m, clen,
            x = document.getElementById('imgMap').width / previousWidth;
        for (n = 0; n < len; n++) {
            clen = coords[n].length;
            for (m = 0; m < clen; m++) {
                coords[n][m] *= x;
            }
            areas[n].coords = coords[n].join(',');
        }
        previousWidth = document.getElementById('imgMap').width;
        return true;
    };
    window.onresize = this.resize;
};
imageMap = new ImageMap(document.getElementById('Map'));
imageMap.resize();

问题现象 #

页面首次加载时，map中area的coords会变为NaN,NaN,NaN,NaN，必须手动刷新1-3次才能正常显示。

尝试过的无效方案 #

• 强制刷新的临时方案：

if(document.getElementsByTagName('area')[0].coords == "NaN,NaN,NaN,NaN"){
    location.reload(true);
}

• 在jQuery load回调中初始化ImageMap，首次加载时coords仍为NaN：

<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
jQuery('#down').load('islands.php', {
    lcz: '<?php echo $lcz ?>', op: '2'
}, function(){
    var imageMap = new ImageMap(document.getElementById('Map'));
    imageMap.resize();
});
</script>

调试发现 #

单独打印areas[0].coords能得到正确的坐标值，但打印整个areas集合时，其中的coords显示为NaN。

最终解决方法 #

通过监听图片的onload事件，确保图片加载完成后再初始化ImageMap并执行坐标调整，代码如下：

const img = new Image();
img.onload = function() {
    // 初始化ImageMap并执行resize
    imageMap = new ImageMap(document.getElementById('Map'));
    imageMap.resize();
}
img.src = '<?php echo $vett['IMG']; ?>';

内容的提问来源于stack exchange，提问作者Primal