为什么此代码无法在IE8和较小程度上的IE7中工作

Question

I have the following code for an zoomable map. Works on FF and Safari etc, but dies after you go in and out of the various levels one or two times. The zoom then ceases to function and the links just die. IE7 lasts a bit longer but still eventually just stops working. Hard to figure. This code is from a plugin by HiFi and Joel Sutherland. I have left messages on his blog and sent an email to HiFi but no response so I am hoping someone here can help. BHere is the main code:

/*
 * Copyright (C) 2009 Joel Sutherland.
 * Liscenced under the MIT liscense
 * TODO:
 * 1. Create API
 * 2. Address accesibility automatically
 * 3. Make object oriented
 */  

(function($) {
    $.fn.zoommap = function(settings) {
        settings = $.extend({
            zoomDuration: 1000,
            zoomClass: 'zoomable',
            popupSelector: 'div.popup',
            popupCloseSelector: 'a.close',
            bulletWidthOffset: '10px',
            bulletHeightOffset: '10px',
            showReturnLink: true,
            returnId: 'returnlink',
            returnText: 'Return to Previous Map'
        }, settings);

        $(this).each(function(){
            var map = $(this);
            $(this).data('currentId', '');

            function showMapById(id){
                var region = findRegion(settings.map, id);
                if(region != -1){
                    displayMap(region);
                }
            }

            // recursive id find
            function findRegion(root, id){
                if(root.id == id){
                    return root;
                }else{
                    if(root.maps != undefined){
                        for(var i=0; i<root.maps.length; i++){
                            var possible = findRegion(root.maps[i], id);
                            if(possible != -1)
                                return possible;
                        }
                    }
                }
                return -1;
            }

            // region is a map
            // This gets called every time we zoom
            function displayMap(region){
                //Set Current Region Id
                $(this).data('currentId', region.id);

                //Clear the Map and Set the Background Image
                map.empty().css({
                    backgroundImage: 'url(' + region.image + ')',
                    width: settings.width,
                    height: settings.height
                });
                var check = map.css('background-image');

                //Load RegionData
                loadRegionData(region);
            }
            /************************************************************************************/


            //Show Return Link
            function showReturnLink(region){
                map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
                $('#' + settings.returnId).hide().fadeIn().click(function(){
                    showMapById(region.parent);
                });
            }


            //Load the Bullets 
            function loadRegionData(region){
                var url = region.data;
                map.load(url, {}, function(){
                    //place bullets
                    $(this).children('a.bullet').each(function(){
                        var coords = $(this).attr('rel').split('-');
                        $(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
                               .hide()
                               .click(function(){showPopup($(this).attr('id'));})
                               .fadeIn('fast');                         
                    });
                    //Set up each submap as an item to click
                    if(region.maps != undefined){
                        for(var i=0; i<region.maps.length; i++){
                            addZoom(region.maps[i]);
                        }
                    }
                    //Create Return Link
                    if(settings.showReturnLink && region.parent != undefined){
                        showReturnLink(region);
                    }                       
                });
            }

            function showPopup(id, leftbul, topbul){
                map.find(settings.popupSelector).fadeOut(); 
                var boxid = '#' + id + '-box';

                $(boxid).fadeIn();
                $(settings.popupCloseSelector).click(function(){
                    $(this).parent().fadeOut();
                });
            }

            //add a clickable image for a region on the current map
            function addZoom(region){
                $('<img />').addClass(settings.zoomClass)
                    .attr({
                        src: settings.blankImage,
                        id: region.id
                    }).css({
                        position: 'absolute',
                        width: region.width,
                        height: region.height,
                        top: region.top,
                        left: region.left,
                        cursor: 'pointer'
                    }).appendTo(map).click(function(){
                        //hide neighboring bullets and zoomables
                        var width = settings.width;
                        var height = settings.height;
                        if(region.scan){
                            width = region.scanwidth;
                            height = region.scanheight;
                        }
                        $(this).siblings().fadeOut();
                        $(this).hide()
                               .attr('src', region.image).load(function(){
                                    $(this).fadeIn('slow')
                                           .animate({
                                                width: width,
                                                height: height,
                                                top: '0px',
                                                left: '0px'
                                            }, settings.zoomDuration, '', function(){
                                                displayMap(region);
                                            });
                                });
                    });
            }

            function rempx(string){
                return Number(string.substring(0, (string.length - 2)));
            }

            function addpx(string){
                return string + 'px';
            }

            function showHash(string){
                string = string.replace('#', '');
                showMapById(string);
            }

            //initialize map
            var hash = self.document.location.hash;
            if(hash.length > 0)
                showHash(hash);
            else{
                displayMap(settings.map);
            }

            return this;
        });
    }
})(jQuery);

And also there is a setup file:

$(document).ready(function(){

/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});

$('#map').zoommap({
        // Width and Height of the Map
        width: '697px',
        height: '415px',

        //Misc Settings
        blankImage: '/assets/images/map/blank.gif',
        zoomDuration: 1000,
        bulletWidthOffset: '10px',
        bulletHeightOffset: '10px',

        //ids and classes
        zoomClass: 'zoomable',
        popupSelector: 'div.popup',
        popupCloseSelector: 'a.close',

        //Return to Parent Map Link
        showReturnLink: true,
        returnId: 'returnlink',
        returnText: 'return to previous map',

        //Initial Region to be shown
        map: {
            id: 'world',
            image: '/assets/images/map/continents.jpg',
            data: '/assets/popups/world.html',
            maps: [
            {
                id: 'africa',
                parent: 'world',
                image: '/assets/images/map/africa2.jpg',
                data: '/assets/popups/africa.html',
                width: '156px',
                height: '148px',
                top: '188px',
                left: '270px',
                maps: [
                {
                    id: 'ethiopia',
                    parent: 'africa',
                    image: '/assets/images/map/ethiopia.jpg',
                    data: '/assets/popups/ethiopia.html',
                    width: '79px',
                    height: '47px',
                    top: '150px',
                    left: '425px'
                    }       
                ]       
            },
            {
                id: 'asia',
                parent: 'world',
                image: '/assets/images/map/asia2.jpg',
                data: '/assets/popups/asia2.html',
                width: '302px',
                height: '198px',
                top: '50px',
                left: '380px',
                maps: [
                {
                    id: 'nepal',
                    parent: 'asia',
                    image: '/assets/images/map/nepal-india.jpg',
                    data: '/assets/popups/nepal.html',
                    width: '66px',
                    height: '88px',
                    top: '265px',
                    left: '208px'
                },
                {
                    id: 'phillippines',
                    parent: 'asia',
                    image: '/assets/images/map/phillippines.jpg',
                    data: '/assets/popups/philippines.html',
                    width: '40px',
                    height: '54px',
                    top: '310px',
                    left: '350px'
                }
                ]                               
                }
            ]
        }


    });
});

The second bit sets up the various maps and their siblings.

As I said, it works fine in FF and Safari but simply dies in IE.

All help is very much appreciated.

Dave

Answer 1

This is Joel -- author of the plugin.

It doesn't work because it depends on the 'load' event correctly firing -- which IE doesn't always do. I will release an improvement at some point.

Until then, just use the solution provided in the comments on the post: http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps#comment-497ea133d5f642b4a375d18d421c0bc0