Question

我在“Ajax Loader图像”中遇到问题。在Firefox上它工作正常，但在chrome上似乎没有ajax loader图像。

当我检查产品根据它变化的任何属性以及在ajax完成之前生成的Preloader图像时，我在侧边栏上有一些属性。我正在做的是当我检查任何属性时我首先在div html中插入一个gif图像使用.show（）方法显示它，并在ajax成功后设置div html null并隐藏它。

你可以在firebug中看到div（<div id="ajax_loader_div" style="display:none;"></div>）

代码非常复杂，这就是为什么我不在这里发布代码。非常非常抱歉。你可以在http://vcompare4u.com/wpcompare/products/laptops/上看到它

我需要帮助。请感谢!!!

Answer 1

<div id="#ajax_loader_css" style="display:none;"></div>

应该是

<div id="ajax_loader_css" style="display:none;"></div>

基于the accepted answer here id元素的有效值为

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

Firefox显然是试图通过删除无效字符来修复它，使#ajax_loader_css css选择器匹配某些内容，因为chrome忽略它，所以你的选择器不匹配。

Answer 2

我见过你的代码

众所周知，同步请求会锁定UI。所以在chrome和safari上就不足为奇了（它在Firefox中有趣）

你可以试试这样的事吗

jQuery('#customtag_widget-2 .compare_attribute').bind('change', 

jQuery.filterProductsCompare2 = function () {
$.ajaxSetup({async:false});
jQuery('#ajax_loader_div').css('display', 'block');
jQuery('#ajax_loader_div').html('<img src="http://vcompare4u.com/wpcompare/wp-content/themes/compare/_assets/img/ajax-loader.gif" / >');

jQuery('#customtag_widget-2 .compare_attribute_group').each(function () {



        jQuery(this).children().each(function () {

            if (jQuery(this).children('.compare_attribute').attr('checked')) {

                if (jQuery(this).children('.compare_attribute').attr('name').indexOf('b[') != -1) {

                    brands.push(jQuery(this).children('.compare_attribute').attr('value'));

                }

                if (jQuery(this).children('.compare_attribute').attr('name').indexOf('c[') != -1) {

                    categories.push(jQuery(this).children('.compare_attribute').attr('value'));

                }

            }

        })

    } else {

        minmaxarr = jQuery(this).attr('value').split(';');

        minPrice = minmaxarr[0];

        maxPrice = minmaxarr[1];

    }

    if (!jQuery.support.placeholder) {

        if (isEmptyPlaceholder == 1) {

            jQuery(this).val('Search...');

        }

    }

})

if (jQuery('#dont_change_price').is(':checked')) {
    minPrice = jQuery('#overall_min').val();
    maxPrice = jQuery('#overall_max').val();
} else {}

jQuery.ajax({

    url : file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        dont_change_price : dont_change_price,
        min : minPrice,
        max : maxPrice,
        product_category : product_category
    },
    success : function (data) {
        // Do stuff here
    }
});

jQuery.ajax({
    url : bracket_file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        min : minPrice,
        max : maxPrice,
        product_category : product_category
    },
    success : function (bracket_data) {
        // DO stuff here
    }

});
if (!jQuery('#dont_change_price').is(':checked')) {
jQuery.ajax({

    url : price_file_url,
    data : {
        ajaxsearch : '1',
        s : 'compare',
        ki : keywords_comparei,
        product : '',
        c : categories,
        b : brands,
        checked_id : checked_string,
        min : minPrice,
        max : maxPrice,
        product_category : product_category

    },

    success : function (price_data) {

        // DO stuff here

    }

});
}
jQuery('#ajax_loader_div').hide();
jQuery('#ajax_loader_div').html('');


$.ajaxSetup({async:true});
});

我要做的是对每个ajax请求执行同步请求，而不是使用成功函数，我单独使用ajax请求。由于同步性质，每个请求将一个接一个地处理。

在chrome控制台中检查你的代码我已经看到ajax loader在很短的时间内立即被隐藏。

这里的参考问题和你的一样

Force UI repaint in Webkit (Safari & Chrome) right before Synchronous "Ajax" request

在Firefox中工作时，ajax Preloader无法使用chrome，safari

2 个答案: