Jump to content

Firefox and Opera responsive resized image issue on load


cerstrand_mace

Recommended Posts

Hi!

I'm experiencing a wierd thing when I open my website in Firefox and Opera. The images loading in with a preloader is shown at actual size shortly before resizing to percentage-size according to my CSS. In Chrome the images appear as they should right from the start. What's the problem here?http://mace.macework.se/trycksaker/

 

Grateful for help!Thanks :)

Link to comment
Share on other sites

Depending on internet speed, image size, some will see this, the original image will load, following the css rule applied to it, then after the page is fully rendered, the preloader() will run to cache these gallery images, which seems pointless, as they are already loading/loaded, by the time it is started.

 

The preloader is usually used on images not currently viewed on page load, one example is the original larger image that would appear as a pop up, when a thumb nail of the larger image is selected.

 

another problem is you have css styling within the body of the page, when it should be between the head tags, or in a external css file instead.

Link to comment
Share on other sites

Depending on internet speed, image size, some will see this, the original image will load, following the css rule applied to it, then after the page is fully rendered, the preloader() will run to cache these gallery images, which seems pointless, as they are already loading/loaded, by the time it is started.

 

The preloader is usually used on images not currently viewed on page load, one example is the original larger image that would appear as a pop up, when a thumb nail of the larger image is selected.

 

another problem is you have css styling within the body of the page, when it should be between the head tags, or in a external css file instead.

 

Thanks for the answer!The preload script I'm using is set to hide the image elements until all images are loaded before fading them in, replacing the loader-gifs. The problem seems indeed to be with the CSS not loading quick enough in some browsers causing the image size to be set too late, but that doesn't show in the Firefox Network-flow.

 

About the CSS inside the body, I assume you're referring to the content of my cronjob.php that is loaded at the top of the page. I don't see why I shouldn't use that CSS within the body.

Edited by cerstrand_mace
Link to comment
Share on other sites

When I change the display:inline-block to display:block the problem disappears in firefox, but then the preloader size breaks in chrome. The problem seems to be that the anchor tag generated by the script is overflowing the list-item which sets the size of the image inside. That achor tag should be sized according to the list item and not by itself.

Edited by cerstrand_mace
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...