set background color of image in webview before image is downloaded android
Question
How to set default background color of image in webview while image is downloading. In my current situation my css for image is
img {
display : block;
box-sizing:border-box;
background:#eeeeee;
margin : auto;
margin-top : 24pt;
margin-bottom : 24pt;
width: inherit;
height: inherit;
}
but in this case my webview UI not showing any space or background before image is downloading for image and when once image is downloaded my UI stretch to make room for image and then image background and image is rendered.
How to assign space and set background for image tag before image is downloads and rendered.
Like for this 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>
All the paragraph load instantly and but leave no space for image before its fetched and when image is fetched then ui stretched for showing images. How to set space for image according to img tag size before it is downloaded.
Basically I want to know how to set placeholder for image tag in html.
1 answers
solution1
0 2017-06-20 12:47:11
Could you please give a try:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.