I just try to make fancybox display ajax content including one larger image. that works good so far... I just see that the fancybox is not waiting for the image to be loaded. So at the moment the fancebox is displayed, then positioned, then the image arrived, then resized and positioned again. thats not cool.
Does somebody know how to handle that?
Thanks in advance,
Florian
Related
I try to get my head around the relatively new img attribute "loading".
I understand that if an img has the attribute loading="lazy" then it will tell the browsers that support the attribute, that it can be loaded when getting near the viewport.
So why not always set loading="lazy"? Those images that appear instantly on the screen would get rendered anyways, as they already are inside the viewport. So basically loading="lazy" is ignored in that case anyways.
I also see in this demo https://mathiasbynens.be/demo/img-loading-lazy that the pictures in the top of the dom are having the loading="lazy" attribute set.
I got the link above from: https://web.dev/native-lazy-loading/
Thanks in advance :)
You should avoid setting loading=lazy for any images that are in the first visible viewport.
Source: https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport
In short, if the image is not loaded lazily, the browser can start fetching the resource immediately. Lazy images need to wait until the Layout phase of the browser rendering pipeline, to determine if an image is in the viewport or not.
Adding loading=lazy unnecessarily will likely add a small amount of delay until your webpage is fully rendered.
One of the reasons I can think of to not always use lazy loading is when the network can be disrupted. In that case, you want to download as much as possible while the connection is active, so that the most of the page is usable when the connection is down.
It’s a hint to the browser that the image might not be immediately useful/visible and that it should prioritize other resources. The third image in an image carousel or images appearing far down on the page are some good examples of when this attribute is useful.
Overly lazy implementations, such as Firefox, don’t images until they’re scrolled into view. This causes the browser to display a white area while the image is being loaded. This isn’t an ideal user-experience. Chrome, on the other hand, loads images 3000–8000px before they appear on screen which is too eager again.
Chrome won’t load lazy-loaded images even when they’re within the viewport for background-opened tabs. This is caused by a limitation of Chromium’s IntersectionObserver and may be fixed in a future version.
I am creating an AJAX transition between to pages where I have a hero image which stays the same on both pages.
After clicking on a link, I center the image, add the new HTML behind and fadeOut the center Image.
The problem is, even with a cached image (it is the same file) I see the image appearing suddenly in the behind (from AJAX response, rendering after appending to DOM) when fading out the image in the front.
Even by adding a little delay to the fadeout of the image in front, the image in the back is still no ready. (Probably the rendering just takes more time).
My options would be to wait for the Ajax image div to have rendered completely (which I don't know how to do), or – and that is what I'd like to try:
Replace (copy) the image within the AJAX response before adding it to the DOM.
Is this even possible, and will it help improving the performance?
I will also try to replace the div immediately after replacing the content with the AJAX response.
Any hints are still very welcome.
cheers
You could set the css z-index property so that the top image stays on the top. And set an event listener so when the image underneath is finished loading you can fade out the top image.
$('#bottom-img').on('load', function() {
$('#top-img').fadeOut();
});
Well thanks for the answer. This is what I meant. This would require some waiting for the image to finish loading and then fadeOut the top image. But I got a nicer solution:
Because the two images are exactly the same, I replace the content in the back (ajax response), and immediately after I copy the image on top into the ajax response (so I replace the image with an already loaded one).
Then I fade Out immediately.
This gives me a very smooth looking transition and the downside of the «waiting until loaded» is gone.
(In comparison to my initial question, where I wanted to replace the image within the ajax response before adding it to the DOM, I now add it to the DOM and manipulate it immediately.)
Thanks anyway.
Cheers
I already have data-interchange images on the page - they work fine.
Now that I want to put a background image in a 'div' - I can't get it to work.
What actually happens the image will not show until I put some content in the div. And, of course it only shows enough image to cover the block element in front of it.
I'm guessing I have to some custom CSS to fix this. I actually want the div to be content free, but just show the background image/s based on screen size via data-interchange.
Can anyone help please.
a little vague but from what you have said. have you tried adding the class
.clearfix
on the div with your image in.
I'm currently developing a responsive website and have a certain image within a set amount of 'columns' (div size) for the site. This image is bigger than the size of div itself so flows over the edges (using html and not CSS Background-Image). When I use the CSS background-image method the image gets cut off to fit the div and overflow:visible doesn't fix it (from what I've read you can't have a background-image overflow it's own div).
So I want this image to overflow it's div but also have the image be cropped to the edge of the browser window, otherwise I have a big empty white bar down the side of the website when you resize the browser window for smaller screen devices, like so:
http://i.imgur.com/74NEmDF.jpg
Are there any known methods of solving this or does Javascript need to be used to fix it (I know little JavaScript so I couldn't figure it out myself). Thanks in advance.
edit: Still no luck, been searching everywhere. Would love any help, thanks guys.
edit 2: Figured it out! Was a very simple fix of adding overflow:hidden to my hero unit (big containing div). I feel so stupid it took me so long to figure out such a simple fix.
I've got a jQuery Roundabout loaded, aswell as Cufon for a custom font. When another box is clicked that box then resizes baded on "em's" or "%"'s so what I'd like to know is...
When a user clicks the next box, can I get the Cufon (Styled to H2) to resize based on EM's or is it a big no, no?
Not sure how to represent this as an example, as I am working locally on a Joomla site. Any help appreciated.
Cheers
Just call Cufon.replace("h2") again after you've resized the H2 in your CSS.