0

我在“Ajax 加载程序图像”中有问题。在 Firefox 上它工作正常，但在 chrome 上似乎没有 ajax 加载器图像。

当我检查任何属性 Products 更改时，我在侧边栏上有一些属性，并且在 ajax 完成之前生成了 Preloader 图像。我正在做的是当我首先检查任何属性时，我在 div html 中插入一个 gif 图像并使用它显示它.show() 方法和 ajax 成功后我将 div html 设置为 null 并隐藏它。

<div id="ajax_loader_div" style="display:none;"></div>您可以在 firebug ( )中看到该 div

代码真的很复杂，所以我不在这里发布代码。真的很抱歉。你可以在http://vcompare4u.com/wpcompare/products/laptops/上看到它

我需要帮助。请谢谢！！！

4

2 回答 2

1

我看过你的代码

众所周知，同步请求会锁定 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 加载程序在很短的时间内立即被隐藏。

这是和你一样的参考问题

在同步“Ajax”请求之前强制在 Webkit（Safari 和 Chrome）中重新绘制 UI

于 2013-07-18T05:14:21.597 回答
1 
<div id="#ajax_loader_css" style="display:none;"></div>

应该

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

根据此处接受的答案， id 元素的有效值为

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

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

于 2013-07-18T04:20:22.757 回答