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中正常運行？也許某種.getJSON /緩存問題在IE中？任何信息非常感謝。

Answer 1

如果它是完全隨機的，我的直覺反應是IE未能正確設置圖像尚未加載時懸停。在設置寬度和高度後，嘗試將懸停設置移動到load（）回調函數中。

編輯：根據您的新信息，我建議您更改腳本的第一行以「.json」而不是「.js」結尾。您目前的虛擬主機可能（正確）返回您的JSON響應作爲MIME類型的X - JavaScript而不是JSON，這肯定會混淆IE瀏覽器。

Answer 2

IE瀏覽器將所有ajax請求視爲常規web請求存在一些已知問題。所以事情得到緩存。

你可以試試....

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

另外，如果你是在服務器端設置可緩存

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