html - How to stop images from showing the "blank document" icon while they are loading? -


i have bunch of server-side generated images following html tags:

<img width="75" height="75" src="/mycontroller/myaction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"> 

the problem images show default "blank document" (or "missing image") icon , border while loading. looks this:

http://farm3.staticflickr.com/2044/2538847186_0c3ca2f9b1.jpg

after images loaded, icon of course disappears, , broder gets set 1 specified in css.

i don't want create fancy preloaders , not, make "blank document" icon , default border go away. although user sees less second, still that's not because creates impression wrong images.

how make icon not show while images being loaded?

one idea set background images, cannot because images have transparent areas, , parts of background visible after image has been loaded.

update workaround

i noticed if not specify width , height, default missing icon , border not shown while image loading. workaround did following:

<div class="imgholder"><img src="/mycontroller/myaction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div> 

and style image holder follows:

.imgholder {             border: 2px solid #ddd;             margin: 2px;             padding: 2px;             width: 75px; /* fixed dimensions - should match image sizes avoid cropping */             height: 75px;             overflow: hidden; /* never show scrollbar */             float: left;         } 

still, great have way style loading image , rid of image holder <div>.

does broken icon show on every browser? either way, have tried jquery plugin: imagesloaded ? may in case.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -