I want to show a GIF as a sort of loading screen, between 2 pages.
But as soon as I click the link, to go to the next page, the GIF freezes.
As if the browser stops any processes other than loading.
Any ideas?
This is a bit of an interesting thing I learned a while ago. The gifs loaded, are animated on the main thread, the same one used by JavaScript. Once the page unloading begins your animation will stop. Your best bet in this situation is to use CSS animations, as they run on a separate thread. Under different circumstances, you would want to use a web worker or something similar to prevent page lockup.
Related
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
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.
This is not about loading Facebook asynchronously or any kind of optimization here but to load it as fast as possible rather than as slow as possible ;)
My website contains a LOT of images. And I need the Facebook Like button to show up as soon as possible. But it seems the button doesn't load: it waits for all the images to be loaded before loading itself. Since I have many images, of course the Like button shows up very late. If the connection is really slow, that might even take one minute. You can see the issue here: http://www.totorotimes.com.
Any idea how I could do this?
Thanks a lot!
Take all the javascript code that is for the social media buttons out of your body tags, put them in a file called: "social.js" and then insert that file right above all the js files in yourhead tag. This will make your buttons load before the actual web page loads.
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
Suppose I have a python script that dumps a 1000 images on a webpage, when the user opens the webpage, the browser tries to open all of them at once, which slows down the page.
Is there any way to make sure that only those images are loaded, which lie in the current field of view of the user, to somehow load them depending upon the position of the scroll bar ?
We call this design pattern Lazy Loading. There already lots of plugins achieved it, such as loading images by scrolling. Say
Lazy Load Plugin for jQuery:
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages. Images outside of viewport (visible part
of web page) wont be loaded before user scrolls to them. This is
opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes
the page load faster. Browser will be in ready state after loading
visible images. In some cases it can also help to reduce server load.
You can go to their web page to checkout the full example and api.