IE7-8 中 Jquery、.getJSON 的问题

Question

我有一个 jquery 脚本，可以为一个州的县创建图像翻转。该脚本在 XML 文档中查询县的 x/y 坐标和信息，然后当鼠标悬停在州图像上的县时显示此信息。此外，还会显示随机的县和县信息，直到将鼠标悬停在其中一个县上；一旦观看者将鼠标悬停在县之外，随机显示就会恢复。

该脚本在 FireFox 和 Chrome 中运行良好，但在 Internet Explorer 7 - 8 中运行不佳。在 IE 中，随机显示有效，但大约 75% 的县不会响应悬停功能，显然没有任何模式说明他们获胜的原因不响应（正如我所说，它们在其他浏览器中运行良好）。

    //____________________________________________________________________________________________________________ CONSTANTS
    var DATA_SOURCE       = '/CountyData.js';        // URL of the page that serves JSON county data

    var IMAGE_PATH        = '/images/counties/';     // Relative path to the county image folder

    var CSS_WRAPPER_CLASS = 'countyWrapper';        // CSS class to apply to each county's wrapper <div>
    var CSS_IMAGE_CLASS   = 'countyImage';          // CSS class to apply to <img> tags
    var CSS_INFO_CLASS    = 'countyInfo';           // CSS class to apply to info <div> tags

    var ROTATION_INTERVAL = 10;                     // seconds to show each random county while rotating


    //____________________________________________________________________________________________________ PRIVATE VARIABLES
    var _isHovering         = false;
    var _autoSelectedCounty = null;


    //______________________________________________________________________________________________________ FUN BEGINS HERE
    function highlightRandomCounty() {
        // only show a new county if we're not hovering over another one
        if (!_isHovering) {
            var children    = $('#map-holder').children('div');
            var randomIndex = parseInt(Math.random() * children.length);

            _autoSelectedCounty = $(children[randomIndex]).children('img')[0];

            hideAllCounties();
            showCounty(_autoSelectedCounty);
        }
    }

    function showCounty(countyImage) {
        $(countyImage).stop().animate({ opacity: 1.0 }, 500);
        $(countyImage).siblings().animate({ opacity: 1.0 }, 500);
    }

    function hideCounty(countyImage) {
        $(countyImage).stop().animate({ opacity: 0.0 }, 0);
        $(countyImage).siblings().animate({ opacity: 0.0 }, 0);
    }

    function hideAllCounties() {
        var counties = $('#map-holder').children('div');

        for (var i = 0; i < counties.length; i++) {
            hideCounty($(counties[i]).children('img')[0]);
        }
    }

    $(document).ready(function() {
        // show the pre-loader
        var preloader = document.createElement('div');
        $('#map-holder').append(preloader);
        $(preloader).attr('id', 'preloader');

        //testing var
        var countyCount = 1;
        $.getJSON(DATA_SOURCE, function(data) {

            $.each(data.countyData, function(i, item) {
                // create the container <div> and append it to the page
                var container = document.createElement('div');
                $('#map-holder').append(container);

                // configure the container
                $(container).attr('id', 'div' + item.data_county);
                $(container).attr('class', CSS_WRAPPER_CLASS);
                $(container).attr('style', 'left:'+ item.data_x + 'px; top:' + item.data_y + 'px;');


                // create the <img> and append it to the container
                var countyImage = document.createElement('img');
                $(container).append(countyImage); 

                // configure the image
                $(countyImage).attr('id', item.data_county + 'Image');
                $(countyImage).attr('class', CSS_IMAGE_CLASS);
                $(countyImage).attr('src', IMAGE_PATH + item.data_county_image + '.png');
                $(countyImage).load(function() {
                    // wait for the image loads before setting these properties
                    $(this).attr('width', countyImage.width);
                    $(this).attr('height', countyImage.height);
                });

                $(countyImage).hover(function() {

                    _isHovering = true;
                    hideCounty(_autoSelectedCounty);
                    showCounty($(this));
                },

                function() {
                    _isHovering = false;
                    hideCounty($(this));
                });

                $(countyImage).click(function() {
                    window.location.href =  item.factsLink;
                });

                // create the info <div> and append it to the container
                var countyInfo = document.createElement('div');
                $(container).append(countyInfo);
                $(countyInfo).attr('id', item.data_county + 'Info');
                $(countyInfo).attr('class', CSS_INFO_CLASS);

                // Handle county naming exceptions
                var countyName = item.data_county.toUpperCase();
                if (countyName == 'SAINTJOYVILLE') {
                    countyName = 'ST. JOYVILLE';
                } else {
                    if (countyName.indexOf("SAINT") > -1) {
                        countyName = "ST. " + countyName.substr(5);
                    }
                    countyName += " COUNTY";
                }
                if (item.story_link == 'no') {
                    $(countyInfo).html('<strong>' + countyName + '</strong><br />' + item.data_total_students + ' Students<br />' + item.data_total_alumni + ' Alumni<br />' + '$' + item.economicImpact + ' Impact<br />Click For More...');
                } else { 
                    $(countyInfo).html('<strong>' + countyName + '</strong><br />' + item.data_total_students + ' Students<br />' + item.data_total_alumni + ' Alumni<br />' + '$' + item.economicImpact + 'Impact<br /><strong>Latest story:</strong><br /><img src="' + item.story_link + '" alt="story" height="75" width="110"><br />' + item.story_title + '<br />Click For More...');

                }
             });
        });

        // hide the pre-loader
        $('#preloader').animate({ opacity: 0.0 }, 1000);

         //randomly rotate through the counties
        setInterval(highlightRandomCounty, ROTATION_INTERVAL * 1000);
    });

为了使其在 IE 中正常运行，我需要启用/禁用某些功能吗？也许 IE 中存在某种 .getJSON/缓存问题？非常感谢任何信息。

Answer 1

IE 将所有 Ajax 请求视为常规 Web 请求，存在一些已知问题。所以东西会被缓存。

你可以尝试......

$.ajaxSetup({ cache: false });
$.getJSON("/MyQueryUrl",
   function(data) {
     // do stuff with callback data
     $.ajaxSetup({ cache: true });
   });

另外，如果你使用的是 ASP.NET
在服务器端设置可缓存性

public class NoCacheAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext context)
    {
        context.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }
}

Answer 2

如果它是完全随机的，我的直觉反应是 IE 在图像尚未加载时无法正确设置悬停。设置宽度和高度后，尝试将悬停设置移至 load() 回调函数中。

编辑：根据您的新信息，我建议将脚本的第一行更改为以“.json”而不是“.js”结尾。您当前的网络主机可能（正确）将您的 JSON 响应返回为 mime 类型的 x-javascript 而不是 json，这肯定会让 IE 感到困惑。