如何在数据库的异步加载中使用占位符替换不存在的图像

时间:2012-04-22 06:48:20

标签: javascript jquery image brokenimage

我有一个包含图像的数据库,我需要根据用户的请求即时加载。图像将作为包含div容器中单独s的背景图像...像图像滚动器。

数据库当前是本地数据库,但这不是我的问题。

问题是数据库可能没有我请求的所有图像...我可能会得到一个或多个不存在的图像......并且由于数据库前端的异步和加载图像前端,我不知道如何用标准占位符图像替换不存在的图像。我不能在循环中动态执行它,因为它甚至在加载之前执行。 我尝试使用.Load和.error,但我不确定如何在背景图像上做到这一点。

是否有一种标准且简单的方法来解决这个问题..最好没有插件,因为我有很多...

2 个答案:

答案 0 :(得分:7)

似乎我无法摆脱必须创建另一个DOM元素。以下是我现在使用的内容:

<div style="background:url(providerSrc)">
<img
     style="display:none" 
       src="providerSrc"
   onerror="this.parentNode.style.backgroundImage='url(fallbackSrc)'"  
   />
</div>

取自:http://www.daveoncode.com/2010/08/20/image-background-fallback-img-tag-error-handlers/

如果你知道“更好”的解决方案,请回复

答案 1 :(得分:0)

如果您将占位符作为背景图像放在原始图像后面怎么办?如果图像存在,它将覆盖占位符。如果没有,那么没有任何东西覆盖占位符,它将是可见的。