img替代文本而不是破碎的图像图标

时间:2013-12-13 11:27:20

标签: html image

我正在发送一个html构建的电子邮件正文..
有没有办法在图像尚未加载时显示替代文字?
我尝试用img和文本重叠两个div,它正在工作,但问题是显示了损坏的图标图标

<div style="width:100%;min-height:50px!important;text-align:center;background-color:#eee;border-bottom:solid 2px #aaa">
    <div style="min-height:10px">&nbsp;</div>
    <div style="min-height:30px">
        <div style='width:200px;margin:0 auto;'>
            <a href="http://google.com" target="_blank">
                <div style='position:relative;'>
                    <div style='position:absolute; height:30px;width:200px;z-index:1000;'>
                        <img height="30" width="200" alt="View Presentation" src="http://www.clker.com/cliparts/X/1/Q/v/b/2/green-button.svg">
                    </div>
                    <div style='position:absolute;height:30px;width:200px;background-color:#EEE;'>
                        Click here to view
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div style="min-height:10px">&nbsp;</div>
</div>



请在这里看到我的工作..

http://jsfiddle.net/msvillanueva/aYuAd/1/

1 个答案:

答案 0 :(得分:1)

这个jQuery插件可以帮助你

http://www.appelsiini.net/projects/lazyload

  

延迟加载会延迟加载长网页中的图像。在用户滚动到视口之前,视口外部的图像不会加载。这与图像预加载相反。   在长网页上使用Lazy Load可以加快页面加载速度。在某些情况下,它还可以帮助减少服务器负载。