full size background jQuery - vertical image shrink in first time page loading - Themes by bavotasan.com

tytony

Hi Bavota,
This is really a neat function, and flexible enough to modify. Thanks for sharing the code!

I made a minor change on the code to fit the page I am working on - I need to have a vertical image change its dimension along with browser size changes, so I modified this part - "heightdiff less than (the post removed less than mark) winheight". The top and bottom of image touch browser edge (with white space on the right). The size changing works well, the only issue is when first time page load, the image will go full width of browser width, then flash, and reduced to browser height.

How can I make the image load first time to the height of browser?

Thanks!

T

cbavota

Hmm. You might want to try hiding the image until it is fully loaded the way you want.

tytony

That sounds a bit tricky. Can js do that? Another issue is the image I used is pretty big in dimension, while the image in your example page is much smaller. If I use a small image, I guess it won't have "shrink" effect. But do we lose quality of image when boost it to full browser size?

Thanks!

cbavota

You will lose the quality is a very small image is blown up, but that might add to the design or style, all depending if that is what you want. You can easily hide the image using jQuery. Look at the .hide() function.

tytony

Actually, I tried to hide the image first, doing resizing, then fade it in. But it still adjusting image in first time page load. Then I found a js code can do preload. So I preload images into a previous page (visitor can not get to the image page but from the previous page in first time) , and adjusting issue is no more. I know it's not the best solution, but work around this issue.

cbavota

As long as it works I think it is a great solution.

Hey there!

Categories

In this Discussion

Tagged