Jump to content
cerstrand_mace

Firefox and Opera responsive resized image issue on load

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 :)

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...