【问题标题】:ajax Preloader is not working in chrome,safari while working in firefox在 Firefox 中工作时,ajax Preloader 无法在 chrome、safari 中工作
【发布时间】:2013-07-17 14:12:32
【问题描述】:

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

当我检查任何属性 Products 更改时,我在侧边栏上有一些属性,并且在 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/看到它

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

【问题讨论】:

  • 它有时会在 chrome 中出现,原因很奇怪。有时加载器动画在 chrome 中不起作用。尝试更新您的 chrome 并尝试您的加载程序。
  • 我使用的是28.0.1500.72版本
  • @sforsandeep 在你的 chrome 上运行正常吗?
  • 我删除了你的 php 标签并添加了 chrome
  • @DevZer0 好的,谢谢。你也可以给我解决方案吗

标签: ajax google-chrome safari loader


【解决方案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 加载器在很短的时间内被立即隐藏。

这是和你一样的参考问题

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

【讨论】:

  • 当我点击下一个和上一个时,还有一个相同的问题,当我触发相同的事件时它没有显示加载器。
【解决方案2】:
<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 忽略它,因此您的选择器不匹配任何内容。

【讨论】:

  • 抱歉我的问题是我的打字错误。 id = "ajax_loader_div"。对不起
  • 请编辑您的答案,对不起那个 div id。我需要解决方案。谢谢
  • 我看到一些无效的图像请求,例如 'htthttp://www.getprice.com.au/images/uploadimg/1060/120_51190B88B26D2550E10080010AF11387.JPGp://www.getprice.com.au/图片/uploadimg/1060/120_516BBF4CFADEF370E10080000AF11387.JPG'
  • 您在哪里看到这些请求。我没有得到先生。
猜你喜欢
  • 1970-01-01
  • 2017-12-11
  • 1970-01-01
  • 2023-03-05
  • 2017-06-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多