0

「Ajax Loader イメージ」に問題があります。Firefox では問題なく動作していますが、Chrome では ajax ローダー イメージが表示されないようです。

属性製品をチェックすると、サイドバーにいくつかの属性があり、それに応じて製品が変更され、ajaxが完了する前に生成されたプリローダー画像が生成されます。最初に属性をチェックすると、div htmlにgif画像を挿入し、それを使用して表示します.show() メソッドと ajax の成功後、div html null を設定して非表示にします。

firebug ( <div id="ajax_loader_div" style="display:none;"></div>)でその 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 に答える