@@ -63,11 +63,32 @@ The <> value type denotes a 2D image. It can be a
63
63
including the 'background-image' , 'list-style-image' , 'cursor' properties [[!CSS21]]
64
64
(where it replaces the <> component in the property's value).
65
65
66
- In some cases, an image is invalid,
67
- such as a <> pointing to a resource that is not a valid image format.
66
+ In some cases an image is invalid,
67
+ such as a <> pointing to a resource that is not a valid image format
68
+ or that has failed to load.
68
69
An invalid image is rendered as a solid-color ''transparent'' image with no intrinsic dimensions.
69
- However,
invalid images have special behavior in some contexts,
70
- such as the ''image()'' notation.
70
+ However,
invalid images can trigger error-handling clauses
71
+ in some contexts.
72
+ For example, an
invalid image in
'list-style-image'
73
+ is treated as ''list-style-type/none'' ,
74
+ allowing the 'list-style-type' to render in its place. [[CSS2]]
75
+
76
+ While an image is loading,
77
+ is is a loading image .
78
+ [=Loading images=] are not [=invalid images=] ,
79
+ but have similar behavior:
80
+ they are rendered as a solid-color ''transparent'' image with no intrinsic dimensions,
81
+ and may trigger fallback rendering in contexts that offer it,
82
+ but must not trigger loading of fallback resources.
83
+
84
+ Partially-loaded images (whose [=intrinsic dimensions=] are known, but whose image data is not fully loaded)
85
+ may be either treated as [=loading images=]
86
+ or as loaded images rendered with partial data.
87
+ For example, a UA may render an interlaced GIF in place
88
+ as soon as its first pass of pixel data has loaded
89
+ or even as soon as the image header (which contains sizing data) has parsed
90
+ and refresh the rendering as more data loads;
91
+ or it may wait until the entire image has loaded before using it.
71
92
72
93
Image File Formats {#image-file-formats}
73
94
----------------------------------------
@@ -216,10 +237,14 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
216
237
### Image Fallbacks ### {#image-fallbacks}
217
238
218
239
If both a URL and a <> are specified in ''image()'' ,
219
- then whenever the URL represents an
invalid image,
240
+ then whenever the URL represents an [= invalid image=] or [=loading image=] ,
220
241
the ''image()'' function renders as if the URL were not specified at all;
221
242
it generates a solid-color image as specified in [[#color-images]] .
222
243
244
+ If just a URL is specified (no <> )
245
+ and it represents an [=invalid image=] or [=loading image=] ,
246
+ the ''image()'' function represents the same.
247
+
223
248
224
249
The fallback color can be used to ensure that text is still readable
225
250
even when the image fails to load.
0 commit comments