I have a website with a home page that consists of a large image slider (FlexSlider) at the top of the page, and two rows of four images below it, with each of these images having a caption that overlays it.
Currently, when the page loads for the first time, all of the high-res images for the image slider will be loaded before any of the 8 smaller images below it. The result of this is that while all of the slider images load, there are a bunch of ugly captions all stacking ontop of each other and then when all the slider images have loaded, the subsequent images finally load and the page looks normal.
Is there any way to make the slider images load last?
I don't know any way CSS alone can solve this problem. If you have access to Javascript, it becomes a lot easier to solve.
Use a lightweight default banner image:
Something that loads very quickly and acts as a placeholder for slider images while they load.
Javascript onload: Use Javascript to begin substituting the images after the page is fully rendered. You have a placeholder making sure the layout still looks good (no font mashing or broken layout for lack of a loaded image) which gets neatly substituted when the image is ready.
No render blocking, no messed up layout. Additional overhead of some Javascript (minor) and a generic banner image (should be minor if highly optimized).
Related
I use the native loading=lazy parameter in the image tag to lazy load images which are for most users off-screen. However, what is off-screen depends on the browser window size. For example, on a typical mobile device three images are visible on one of my webpages, but on a typical desktop 8 images are showing. Since server-side I cannot know the size of the user window/screen how can one conditionally lazy load an image based on window size?
I have tried to put two copies of the image into the HTML, one with the loading=lazy parameter and one without and then with a CSS media query to show one or the other with display:none. This does not work. Browsers load the image regardless of if the image element is displayed or not. Hiding the regularly loaded image does not prevent it from being loaded.
When i create gallery on my website, i need thumbs? Or i can use full images and resize it with css?
For example, i have gallery like that: http://otomoto.pl/renault-20-r-20-1-6-1-6-gtl-C21940610.html
If every images will be resizing with css, then browser will load the same image many times or one? Page will load faster when it will be image01thumb.png, image01normal.png, image01full.png? Or just image01full.png?
If you resize with CSS, then the client will have to download the whole image and resize it, which is not good in terms of bandwidth. You want some thumbnail-sized images so that you can send a small image to the client rather than having to send the full thing.
It depends what kind of gallery you have. Obviously when you are using thumbnails the client does not have to download the full image if he never sees the full sized one. But if you have a dynamic gallery where for instance you make an image bigger with a tween/animation on mouse over it might be preferable that the image already is loaded so the transition goes smoothly.
In a web page I have several images which are stacked on top of each other. The CSS for the images are
img {
width: 100%;
height: auto;
padding: 0;
border: 0;
margin-bottom: 0.66em;
}
All images have proper height and width specified in the html img tag.
When the page loads on a slow connection I would like the frames where the images will appear to scale before the actual images are loaded into them. This because it sometimes looks like this:
[----------------]
[ Loaded image ]
[----------------]
[ Not loaded image ]
[----------------]
[ Loaded image ]
[----------------]
where the loaded image have the right size but the not loaded one are still just a row where the alt=text is shown.
Then, when the middle of the three loads it swells to the right size and moves the others.
I would like the appearance and loading to be the same as it would have been without the CSS: The empty frames where the image will appear shows at the right pixelsize, it is then filled with the image.
Please be aware that this of course is a problem only on slow connection, the images are not that big really.
The images are progressive JPGs.
I would like to:
Scale image frames according to css setting before filling them up with the image.
Load images in sequential order, beginning with the ones on top and continuing down the page.
Using the great Lazyloading plugin could of course be a solution, but it seems overkill.
I could also use javascript to detect window width and then change the width and height in the html tag, but this seems unnecessary.
I would prefer a solution where I don't have to alter the code for the images themselves. Preferably only with css if this is achievable.
Looking much forward to your thoughts! Thanks for reading this long post :) !
The order which objects in the page are loaded can to my knowledge not be controlled in any other way than by using a javascript. Different browsers also load the page differently:
Firefox tend to load one progressive JPEG after another, while Chrome starts loading in all of them simultaneously.
The Lazyload plugin for jQuery could be a solution, it does the placeholder and scaling of the images good, but it disables the progressive downloading of the JPEGs.
I think that putting height: auto; in the css for the image makes an improvement (image frame gets right size faster), but it's a marginal difference and I'm not sure.
Solution would be to write a javascript which uses a placeholder image first, and then sequentially reads in the images and allows them to display progressively.
Thankful for further opinions on how this script could be written or different solutions to my problem!
Greetings Overflowers,
A result-set grid will be viewing snaps from HTML pages.
Snaps need to reserve original page layout including any tables, images...
Users will scroll through a snap to fully read a snapped page
Snaps can view varying-size windows anywhere in the HTML pages
Question: can lazy loading be implemented such that only viewed windows is loaded without losing the interactivity (e.g. hyperlinks) of snapped HTML pages ? If HTML pages cannot be tailored dynamically and lazy loaded this way, any interactive document format (e.g. PDF, Flash) is welcomed.
Update: Sorry for the confusion. Snaps are not images, they are random viewports anywhere from the HTML pages. In images it is simple, we can load only the portion we need to view. In HTML this is difficult, except when the portion is actually a whole viewable HTML tag element and it fits the needed portion. iframes would only facilitate the window to view the snaps onto, but I do not want to load the whole HTML pages because they are big, but only the needed snaps. The problem snaps can be somewhere in the middle of pages layout divisions where each division is very big. Therefore, fixing the layout size and lazy load their content later on alone would not help. I think layout transformations are necessary but very difficult. I wish I can take a picture of the full HTML pages and take whereever portion I need to view and this image portion keep interactive :)
Thanks !
You can use JavaScript with XMLHttpRequest (XHR) to fetch content asynchronously and place that text on the page (i.e. lazily loading content). I am not familiar with some of the terms that you are using (e.g. what a "snap" is), but if your layout specifies sizes (instead of relying on content, for example, to set the size of a table column), then this lazy loading can be done without re-rendering the layout.
As I interpret it - you have some fixed-size "viewport" div with scrollbars. You have Javascript that monitors the scrolling events of the viewport. You have to (somehow) have some rough idea of what content elements go where on the inner page. If a section is scrolled into view that has not been loaded, then send for it using AJAX. I think the trickiest part of this endeavour would be establishing the rough idea of what content elements go where without completely loading the content page, but perhaps you already have some assumptions you can make about the content.
Edit:
I do not want to load the whole HTML pages because they are big
This seems to indicate that you in fact do have some assumptions about the pages you're working with. How are the pages "big"? Do they have massive tables, massive images, a large number of images, flash content, javascript content...? You might have better success with loading all of the DOM that isn't of a certain tag type, and then selectively loading the rest.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.