/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Remove quare when image is not loaded yet…

Hi,

A small question,

Is it possible to remove the square that you see when an image isnt loaded completly yet?
I woul like to have it plain white (as is the background of the site)

Thanks!

S

to post a comment
HTML

10 Comments(s)

Copy linkTweet thisAlerts:
@holyhttpSep 14.2012 — Specify the width and height of the image so the web browser can just reserve the required space for the image without showing the small square.
Copy linkTweet thisAlerts:
@ZABISep 14.2012 — ?

i had done this using a trick maybe helps you too.

<img src="blank.gif" width="100" height="100" style="background: url(image.jpg);" />

put a blank gif or png as an image and the original image as its background

but make sure blank image must exists

width and height is also set properly

and keep in mind its just a trick ?
Copy linkTweet thisAlerts:
@NomistakeauthorSep 14.2012 — ah, i'll try it out! thanks
Copy linkTweet thisAlerts:
@holyhttpSep 14.2012 — Adding a background image to a foreground image is really an overkill if not counterproductive. Yes, it's a trick but one with a price: an additional http request to the server which just increases the page download time. Besides, using inline style should only be a last resort, read when really necessary.
Copy linkTweet thisAlerts:
@NickJohnsonSep 18.2012 — But why you want to do so???????

I mean it is just a matter of some seconds to reload the image on the page...

Any specific reason behind doing it????
Copy linkTweet thisAlerts:
@NomistakeauthorSep 18.2012 — sometimes, th eimages are not shown fast enough.

at that moment, briefly, a square where the image should be shown is displayed (square as big as the image, not the little red cross thing)

this square has borders etc...

i wander how i can remove these squares, if even possible...

thanks!
Copy linkTweet thisAlerts:
@ZABISep 18.2012 — hMMm, i think this issue is with a specific browser. chrome does not show this kind of the box while loading an image. you can optimize image file size and set some cache. also you can set image' style "display: none;" and then you can use onload event to show the image.
Copy linkTweet thisAlerts:
@NomistakeauthorSep 19.2012 — Thank you ZABI :-)

Thats why a started this treath:

http://www.webdeveloper.com/forum/showthread.php?264487-RESOLVED-showing-when-everythings-is-loaded...

Resolved as far as dealing with the problem :-)
Copy linkTweet thisAlerts:
@ZABISep 19.2012 — its gr8 if it works ?

where r u from by the way ? u can PM if necessary
Copy linkTweet thisAlerts:
@NickJohnsonSep 20.2012 — sometimes, th eimages are not shown fast enough.

at that moment, briefly, a square where the image should be shown is displayed (square as big as the image, not the little red cross thing)

this square has borders etc...

i wander how i can remove these squares, if even possible...

thanks![/QUOTE]



Ohkzz.... Now, got your point...
×

Success!

Help @Nomistake spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...