html占位图img placeholder

html image placeholder while loading

update 2013 11.21

<div id="placeHolderDiv" style="background-repeat:no-repeat; background-position: center center;background-image:url('file:SPBGLogo.png'); width: 300;height: 58.90909090909091;"></div>

还有两个问题，解决的不是很好。

1.加载的速度太慢，有时候，没看到它加载，通过网络获取的图片就显示了。

2.当这个div足够小时，背景图片不会缩小

搜索了一下，可以用这个属性来实现，background-origin。

CSS3 Backgrounds

CSS3 contains several new background properties,
which allow greater control of the background element.

In this chapter you will learn about the following background properties:

• background-size
• background-origin

上代码：

var backgroundSizeHeight = 62;

                            if(imageHeight < backgroundSizeHeight)

                            {

                                backgroundSizeHeight = imageHeight;

                            }

                            //775  482

                            this.HDAlbumHtml +='<div id ="HDplaceHolderDiv" style = "background-size: auto '+ backgroundSizeHeight +';background-repeat:no-repeat; background-position: center center;background-image:url(\'file:SPBGLogo.png\');width: '+this.imageWidth +';height: '+ imageHeight +';" >';

如果整个div的尺寸比图片小，那么我也通过background-size调小背景图的尺寸。

问题一：

如何实现在页面完全加载后执行javascript代码 

我的占位图是本地资源，图片是从网络获取的

原本是body里面写个onload，去掉遮罩层。

现在改成

            <script language="javascript" type="text/javascript">

                document.onreadystatechange = function () {

                    if (document.readyState == "complete") {

                        onloadActionReady();

                    }

                }

            </script>