使用带背景图像的div不一致加载图像叠加层

时间:2012-02-23 01:11:23

标签: 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: url('http://mysite.com/overlays/top_seller.png');}
    .clearance { background-image: url('http://mysite.com/overlays/clearance.png');}
  </style>
</body>

我正在使用完整路径,因此我没有任何相对路径问题。

页面加载后,我对Web服务进行ajax调用以返回JSON信息:哪个产品应该获得哪些叠加。 json响应包含回调名称和回调参数:

[{"params":{"pid":"abc","overlay":"top_seller"},"callback":"setOverlay"},{"params":{"pid":"xyz","overlay":"clearance"},"callback":"setOverlay"}]

ajax调用完成并调用回调函数,该函数创建一个空div,为其指定overlay类并将其预先添加到产品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);
}

我用2种不同的覆盖层测试了这个,这个过程似乎在chrome中运行良好。但是在firefox中,其中一个叠加层会加载但不会覆盖其他叠加层。当我查看网络控制台时,永远不会加载第二个叠加背景图像。跨浏览器的这种不一致感觉对我来说是一个竞争条件,背景图像没有完全加载可用,但我找不到任何修复它的信息。

在调用我的ajax脚本之前,我已经在使用document.ready了。我如何解决它?

更新:所有代码/ css都被简化为更容易阅读。

UPDATE:在firebug中,当我检查overlay div时,该类根本不包含background-image属性。当我检查叠加层时,在chrome中,该类具有背景图像URL,但是有一条线穿过它并且感叹号表示无效的属性值。

0 个答案:

没有答案