隐藏图像断开链接而未下载到浏览器（mozilla firefox）

Question

我正在显示一张超过AWS的图片，但需要时间，直到显示损坏的图片链接，我想隐藏这个断开的链接，直到加载的图片。

---

HTML

<img id='myprofilepic' src='http://m.c.lnkd.licdn.com/mpr/pub/image-a81XkVF4ZnB2u0lwSdEJVHYKf4sS4NrSY8LMoJz4fPJspmdGa81MeyE4fOycprOehvQ6/govind-singh-nagarkoti.jpg'>
//image is at aws s3 which was taking too much time above is just an example

---

CSS

#myprofilepic{
width:75px;
height:75px;
padding:1px;
border:1px solid #021a40;
background-color:#ff0;
}

Answer 1

一种方法是将img src设置为1像素透明GIF，并将真实图像设置为背景：

HTML：

<img id="myprofilepic" src="transparent.gif" alt="" />

CSS：

#myprofilepic{
    width: 75px;
    height: 75px;
    padding: 1px;
    border: 1px solid #021a40;
    background-color: #ff0;
    background-image: url('http://m.c.lnkd.licdn.com/mpr/pub/image-a81XkVF4ZnB2u0lwSdEJVHYKf4sS4NrSY8LMoJz4fPJspmdGa81MeyE4fOycprOehvQ6/govind-singh-nagarkoti.jpg');
}

这背后的想法是1x1 GIF将快速加载，背景图像不会显示损坏的图像链接。