Question

如何在下载图像时在webview中设置图像的默认背景颜色。在我目前的情况下，我的css for image是

img {
  display : block;
  box-sizing:border-box;
  background:#eeeeee;
  margin : auto;
  margin-top : 24pt;
  margin-bottom : 24pt;
  width: inherit;
  height: inherit;
}

但是在这种情况下，我的webview UI在图像下载图像之前没有显示任何空间或背景，当下载图像时，我的UI拉伸以为图像腾出空间，然后渲染图像背景和图像。

如何在下载和渲染图像之前为图像标记指定空间和设置背景。

喜欢这个html

<!DOCTYPE html>
<html>
  <head>
     <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, initial-scale=1'>
     <link rel="stylesheet" href="roboto.css"><link rel="stylesheet" href="webview.css">
  </head>
  <body>
     <p>According to a recent tweet from noted tipster Evan Blass (@evleaks) the upcoming Samsung Galaxy Note 8 is internally codenamed "Samsung Gr3at". The number 3 apparently signifies three new features that are coming to the Note 8.
     </p>
     <img class="alignnone size-full wp-image-3061" src="https://app.abc.com/wp-content/uploads/2017/06/evleaks-Note-8.jpg" alt="" width="640" height="300" />
     <p>Although everything about the upcoming phablet is mere speculation, it is believed that the Note 8 will feature the new Infinity Display, a Snapdragon 836 SoC and a dual camera setup. Samsung is expected to launch the Galaxy Note 8 in August.
     </p>
  </body>
</html>

所有段落立即加载，但在获取图像之前没有留下图像的空间，并且在获取图像时将ui拉伸以显示图像。如何在下载之前根据img标签大小设置图像空间。

基本上我想知道如何在html中为图片标记设置占位符。

Answer 1

请你试试看：

<强> CSS：

.myDiv {

  border: 2px gray;
  display : block;
  box-sizing:border-box;
  background:red;
  margin : auto;
  margin-top : 24pt;
  margin-bottom : 24pt;
  width: 100%;
  height: inherit;
}

HTML：

 <body>
     <p>According to a recent tweet from noted tipster Evan Blass (@evleaks) the upcoming Samsung Galaxy Note 8 is internally codenamed "Samsung Gr3at". The number 3 apparently signifies three new features that are coming to the Note 8.
     </p>
     <div class='myDiv'>
        <img class="alignnone size-full wp-image-3061" src="http://www.jqueryscdript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" width="640" height="300" />
     </div>

     <p>Although everything about the upcoming phablet is mere speculation, it is believed that the Note 8 will feature the new Infinity Display, a Snapdragon 836 SoC and a dual camera setup. Samsung is expected to launch the Galaxy Note 8 in August.
     </p>
  </body>

在图像下载android之前，在webview中设置图像的背景颜色

1 个答案: