我正在使用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,但是有一条线穿过它并且感叹号表示无效的属性值。