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”结尾。您当前的Web主机可能（正确）将您的JSON响应作为mime-type x-javascript而不是json返回，这肯定会混淆IE。

IE7-8中的Jquery，.getJSON问题

2 个答案: