Jquery 使用div与背景图像加载图像覆盖不一致_Jquery_Image_Load_Overlay_Background Image

Jquery 使用div与背景图像加载图像覆盖不一致

jquery image

Jquery 使用div与背景图像加载图像覆盖不一致,jquery,image,load,overlay,background-image,Jquery,Image,Load,Overlay,Background Image,我正在使用jQuery在产品图像的顶部添加一些图像覆盖，但是我很难让覆盖一致地显示出来页面正文中的css定义覆盖背景图像路径： <body> .... //products grid <div class="producttile" data-overlay-pid="abc"> ...</div> //end products grid <style> .top_seller { background-image

我正在使用jQuery在产品图像的顶部添加一些图像覆盖，但是我很难让覆盖一致地显示出来

页面正文中的css定义覆盖背景图像路径：

<body>
.... //products grid
    <div class="producttile" data-overlay-pid="abc"> ...</div> 
     //end products grid
  <style>
    .top_seller { background-image: url('http://mysite.com/overlays/top_seller.png');}
    .clearance { background-image: url('http://mysite.com/overlays/clearance.png');}
  </style>
</body>

ajax调用完成并调用回调函数，回调函数创建一个空div，为其分配overlay类并将其前置到product div

setOverlay : function(params) {
  var pid = params['pid'];
  var el = jQuery(selector + "[data-overlay-pid='"+params['pid']+"']");
    //inject an overlay on this element
    //add div with class of size
    el.css('position','relative');
    var new_overlay = jQuery('<div>');
    new_overlay.attr('class',params['overlay']);
    new_overlay.prependTo(el);
}

我用两种不同的覆盖层对此进行了测试，这个过程在铬合金中运行良好。但在firefox中，其中一个覆盖层加载，而另一个覆盖层不加载。当我查看网络控制台时，第二个覆盖背景图像从未加载。在我看来，浏览器之间的这种不一致性就像是一种竞争条件，背景图像无法完全加载，但我找不到任何信息来修复它

在调用ajax脚本之前，我已经在使用document.ready。我怎么修理它

更新：所有代码/css都被简化为更易于阅读

更新：在firebug中，当我检查overlay div时，该类根本不包含background image属性。在chrome中，当我检查覆盖时，该类有背景图像url，但有一行穿过它，并有一个感叹号表示无效属性值。

我看到您的json响应包含一个名为top_seller的类，但css中没有top_seller类。这可能是代码中的一个错误，还是您刚刚省略了一些css？我刚刚省略了一些原始代码。我试图简化它，使其更易于阅读。我看到您的json响应包含一个名为top_seller的类，但css中没有top_seller类。这可能是代码中的一个错误，还是您刚刚省略了一些css？我刚刚省略了一些原始代码。我试图把它简化为更容易阅读。

setOverlay : function(params) {
  var pid = params['pid'];
  var el = jQuery(selector + "[data-overlay-pid='"+params['pid']+"']");
    //inject an overlay on this element
    //add div with class of size
    el.css('position','relative');
    var new_overlay = jQuery('<div>');
    new_overlay.attr('class',params['overlay']);
    new_overlay.prependTo(el);
}