使用 html/css3 和 WebView 将图像缩放到屏幕...在图像加载之前获得白屏答案

【问题标题】：Using html/css3 and WebView to scale an image to the screen... get a white screen before the image loads使用 html/css3 和 WebView 将图像缩放到屏幕...在图像加载之前获得白屏
【发布时间】：2011-10-31 15:06:18
【问题描述】：

我在 Android 中使用 WebView 加载一些本地 html，将图像缩放到屏幕作为背景...但是，当我开始加载 WebView 的活动时，我得到一个非常短暂的白屏闪烁在图像加载之前。这不是什么大问题，但我想避免这种情况...我尝试将所有相关元素的背景设置为黑色，但它仍然会发生...有什么想法吗？

这是我的html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>NerdRAGE</title>

    <style>
        * { margin: 0; padding: 0; }

        html { 
            background: url(images/10_1.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }


    </style>
</head>

<body bgcolor="#000000">



</body>

</html>

这是我的 XML：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#000000" android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView  
    android:id="@+id/mapview"
    android:background="#000000" android:scaleType="centerInside" android:layout_gravity="center_vertical|center_horizontal" android:clickable="false" android:fitsSystemWindows="true" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </LinearLayout>

【问题讨论】：

如果将body 和html 设置为background-color:#000000; 会发生什么？
相同的结果......不幸的是，我不知道这个问题是在 Android 还是等式的 html/css 端。
您可以预加载图像吗？这可能会解决问题。
我不确定如何实现...
对不起。你解决他的问题了吗？

标签： android html css

【解决方案1】：

在此处找到此帖子：
How to prevent the white 'flash' on page load created by background image loading delay?

尝试为 html 元素设置背景颜色并删除 body 元素上的 bgcolor="#000" 内联样式（应该避免这样做。这是不好的做法）。

html {background: #[color] url('images/10_1.jpg') no-repeat center center fixed; }

【讨论】：

即使我在 url() 之前设置了 #000 也不起作用。在加载图像之前它仍然是白屏。将 WebView 背景设置为透明也没有运气，因为加载了 DOM 树。只是背景尚未加载，它是白色的。