I have a site which uses largeish (60-100k) background images which vary from page to page.
When the user loads the page for the fist time, the page content is loaded first and the background image appears a short time after. This is, I understand, intended behavior in browsers but it makes the page loading look quite "bumpy" on slower connections.
I had thought of hiding the page with a loading "mask" which gets removed by JS when the background image has loaded...but this is still quite an ugly approach.
How could I make it so the page content and the background image appear to the user at the same time?
The best solution here would be to try and find a way to get that image smaller. There are some good compression tools out there. I recommend looking at ImageMagick, some JPEG-specific tools (http://jpegclub.org/) or PNG-specific tools (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).
But to do what you're specifically asking - hide everything on the page until it's ready and then have it load in - you could use jQuery and do something like this:
$(function(){
var bgimage = new Image();
bgimage.src="{your giant image's URL goes here}";
$(bgimage).load(function(){
$("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();
});
});
What this does is it waits until all the elements are loaded on the page and then creates a new Image object. We point the source to your larger image file. When that is finished loading, we change the background to use this newly loaded image, which should load instantly because the browser cached it.
I have fadeIn() there in case you want to hide all of the content on the page until it's ready. This means you should make the hidden.
For some reason fadeIn() works better than show() or simply removing a "hidden" class via removeClass(), if you take that approach. With the latter two approaches the tag seems to resize its height to fit the content of the page which can result in not displaying the background image in its entirety.
Honestly though, I don't really recommend this approach :p
At least, not if you're going to hide all the content on the page until it's ready.
This might be a good approach for displaying the background image only when it's ready, avoiding the partially loaded image being displayed...
A slower load is just the tradeoff for using large images.
A better way would probably be to use jquery and fade the background image in once it has loaded. Also you could try preloading the next image before the user clicks the next page to make it even smoother.
If you delay the content from showing until the image has shown it's just going to irritate your users. They are (probably) there primarially for the information so don't ever touch anything that delays that process.
The exception for this is some arty farty website where people who don't know about websites come on to click on things and they don't care about anything apart from it looking pretty.
You could use data URIs to mitigate this issue in modern browsers and fall back to your current technique for IE 6/7.
Related
I am creating a website which hosts 360 panaramic photography. I am creating basically a slideshow of 360's using an iframe with tiled thumbnails. When the user clicks on a tile it loads that 360 into the iframe through JS by changing the src value of the iframe.
My issue is bandwidth, If I use the method of loading the src value into the iframe then every time this occurs, it seems to reload the content - looking at my network tab in my browser this does seem to be the case, I can see the image files being reloaded for a second time if the user re-views a tile/iframe.
My other option would be to have multiple iframes and just hide or show them based on which tile was clicked. Maybe using 'display:none'?
However would this then create the issue of multiple 360 panoramic photos running at the same time and being taxing on the users computer/ graphics card? Or would display:none then disengage the iframe from creating work for the graphics card?
Is there anyway to tell whether the iframe has been disengaged when hidden and is no longer taxing the users computer?
And if it is, then is there a way around this somehow? Can an iframe be disengaged so that it isn't running so to speak but it can still be made visible to the user again without reloading the content again.
Thanks, I hope this makes sense.
I think your problem can be solved using two things: Lazy Loading and Visibility.
You can achieve the lazy loading either the native way
<iframe src="your-360-image" loading="lazy"></iframe>
or using one of the libraries that does it for you, Iframely and lazyframe are good ones.
You can set the all the iframes to start loading in the background when the user is near them, so by the time the user clicks the tile, it's already loaded.
Regarding that the browser reloads the images, that might be because you set display to none, or even remove the element completely from the DOM. You might just want to hide it by setting the visibility to hidden, this should not re-load it again.
On my site as the page is loading I noticed, on both mobile and desktop, that as I scroll the screen gets a gray box. It's very jarring. I also noticed it on my gallery page.
Any idea what's happening or try to fix it? I've never run into this issue on other sites.
What's happening is that you load EVERYTHING in your your <head> tag.
So what happens is that your browser is blocked by getting all of the files first, to be more precise 123 files. Then it tries to read everything and make sense of it. From what I've noticed there must be some jQuery for scrolling as well, which adds even more stress.
Try to put all of the <script> tags at the bottom of your body. This allows browser load them after it reads the styling and content. That's probably the quickest fix.
edit
Also there there are multiple copies of same file loaded and multiple versions of same plugins. They are blocking loading as well.
I have a full-screen .gif animation that starts when the user accesses the home page and then fadeOut reviewing the page's content. The thing is, depending on the computer and its internet, there is a delay and sometimes the animation end up hiding before it has been fully viewed.
I am using the code below to hide the div that allocates the animation based on the duration it has (around 10s). I don't know if it is possible, but I would like to hide it after it as been fully played/load(not sure) and not after a specific amount of time.
$(".animation").delay(9500).fadeOut(400);
Try placing the code in a separate JS file (or update the current file and test it) and then...rather than using the $(document).ready, use the $(window).load
The window load event will execute after the page is fully loaded, including all the frames, objects, images, etc.
I have seen a method on Youtube and various other sites, which, upon changing to another page on the same server make the browser not directly redirect the user to the new page, but
stays on the same page until the new one is loaded
dynamically loads the new pages content seemingly without any idle time inbetween page changes
shows a progess bar on the top of the screen
leaves any html headers or other fixed content unchanged
In this gif you can see the animation on top of the page, upon changing the page, there is a progress bar and the new page is displayed seamless.
Here is where I am a little helpless, my attempts of finding something useful in this manner brought me practically nowhere, i do not know if there is a library/framework for this use that i simply cannot find or there is some messing around with dynamical page loading i do not know about.
How is such an effect achieved and what techonolgies are requiered?
You need a single page application framework. For example look at AngularJS
If you want, you can do it with pure JS code using AJAX.
I have a page that loads images from various sources. Occasionally these images fail to load; perhaps the link has gone dead or whatever. That's fine.
What bothers me is that the browser might take 6 seconds or even longer (I've seen 20 seconds) before it decides that the image has failed to load. During this time the spinning loading wheel in the Chrome tab keeps going and going, making it seem like my page isn't ready.
I've switched my javascript loading from onload to $(document).ready() so at least my page isn't inactive while it waits for the images to load. But it might appear as though it is.
But is there some way to make my page appear "ready" (no spinning wheel) when all it's doing is waiting for the image? Maybe another way to load images? I currently use the img element with src. Or a way to make it give up sooner? Does it really need 6 seconds to decide that an image link is dead?
Not sure if this has a solution. It's a problem that I have seen on a lot of websites, not just mine, but it drives me nuts. I'll often click the stop-loading-x just to make it stop! I'd at least like for my own website to not be like that.
According to my tests, the loading indicator in Chrome does not show for image elements where the loading was triggered by Javascript. Thus, if you don't mind the images not loading with javascript disabled, you could send the img with the src unset, and set it when the page loads. You can store the URL in data-src. The upside is then that you can control when the image loads, if you want to (though you may want to use a plugin for that, like Roullie's answer suggests).
<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">
...
$(document).ready(function(){
$(".async-img").each(function(){
this.src = $(this).data("src");
})
})
maybe it can help. lazyload.js