Html preloader - delay page load - javascript

I need some help with my new template :). Before the webpage loads I want to show a preloader gif. I done it, however it shows just a little, because the page loads very fast. So I would like to delay the page (with 2 seconds, as an exemple), without affecting the preloader, so it (the preloader) would appear for 2 seconds, so until the page loads.
Here is my code (note that it will not work on jsfiddle, because I can't upload the .gif file): jsfiddle.net/hLmxpsnw/

For whatever reason u want it its done using setTimeout here is the code
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000); // set the time here
});
});
jsfiddle http://jsfiddle.net/harshdand/593Lqqnm/2/

You Can Just use delay(); jquery function to add dealy to Preloader
$(document).ready(function () {
$(window).load(function(){
$('#preloader').delay(3000).fadeOut();
});
});

it's a sample
<script>
setTimeout(function () {
$('.loader-container').fadeToggle ();
},3500);
</script>

Related

jQuery executes before page finishes loading even though I'm using $(window).on('load', function()

I am trying to scrape some times from https://www.speedrun.com/mm for a chrome extension but the issue I'm having is that jQuery loads before the webpage has completed loading. When I refresh the page while having Inspect open it works just fine (I'm assuming it's making the webpage take longer to load) but otherwise I can't scrape the data, it will return blank. Is there any way for me to ensure that the data is ALWAYS loaded first?
$(window).on('load', function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
Edit: I tried this as well and got the same result
$(document).ready(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
Try this edited with $(document).ready
Load is called when all assets are done loading, including images.But the ready is fired when the DOM is ready for interaction.
Reference
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
http://api.jquery.com/ready/
$(document).ready(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Put your code inside document.ready .
$(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
The leaderboard data seems to be loaded using ajax. Have you tried using .ajaxSuccess() or .ajaxComplete() instead of .ready?
Please check once if you are getting $ as undefined,
Use different instance of JQUERY like
jQuery(document).ready(function() {
var worldRecord = jQuery('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
I found a workaround since loading after the ajax completes doesn't seem to be working. I used the setTimeout function and set it to one second to see if that worked and it did :D
$(document).ready(function() {
setTimeout(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
}, 1000);
});

JQuery interval isn't working

I've made a small script to load a page into a div of another page, which gets refreshed every 5 seconds.
The page is loaded as expected, but the interval doesn't seem to work.
I already searched for a solution, but all threads are saying that my code should work like that. So I decided to post the full code here.
JQuery (and AJAX):
<script>
function load(){
$('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function(){
load() // this should run every 5 seconds
}, 5000);
</script>
The chatlogframe.php file contains a SQL Select query. The data should be reloaded every time the scipt gets executed.
UPDATE:
I checked the Chrome Console where it says Uncaught TypeError: $(...).unwrap is not a function
I don't think that the function is wrong, but maybe it helps.
UPDATE 2:
Heres the html div:
<div id='chatload'></div>
It works. May be there's some issue with your code in $('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
.unwrap() could be possible issue but to isolate that you would need to post your sample HTML container.
function load() {
console.log("Do something");
$('#chatload').load('https://jsonplaceholder.typicode.com/posts/1', function() {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function() {
load() // this should run every 5 seconds
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatload"></div>

Jquery working on console but not on page

I am trying to hide a div after certain time once its loaded and its working when I do this in the console but it doesnt work when I put this code in the actual webpage.
(function ($) {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
}
}(jQuery));
The div insightera_widget_content cannot be seen when I view the source code as well, but I can see it on the Inspector. It loads from some external widget.
I have tried using the below to the page too and it doesn't work at all.
<script>
$(document).ready(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');}
});
</script>
Any suggestions?
Setup a setInterval() to check for the existence of the element, and once it finds it, run your jquery and clear the interval.
var interval = setInterval(function() {
if ($('#insightera_widget_content').length) {
$('#insightera_widget_content').delay(10000).fadeOut('slow');
clearInterval(interval);
}
}, 1000)
/* you don't need this part - just simulating the widget adding the code to the page */
setTimeout(function() {
$('body').append('<div id="insightera_widget_content">insightera_widget_content</div>');
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide loader after script and images are loaded Completely

I am included external script and lib. and images are in DOM. I want to remove loader after images and scripts are loaded completely in URL.
window.onload= function(){
$(".loader").hide();
}
but it is not working before script or image loaded it is executed.
you syntax is incorrect. use this
replace
window.onload= function(){
by
$(window).load(function() {})
the $(window).load() function run when the page is fully loaded including graphics. see https://api.jquery.com/load-event/
you can check if the image is loaded using a setTimeout, take a look below:
setTimeout(function () {
//Check if the image or whatever is loaded
}, 30000);
Also you can create an attribute to don't enter again in the setTimeout after your stuffs are loaded, like:
var isLoaded = 0;
if(isLoaded == 0){
setTimeout(function () {
isLoaded = 1;
//Check if the image or whatever is loaded
}, 30000);
}
You can encapsulate your code in different cases:
The code below it'll wait for all the images and text assets to finish loading before executing.
$(window).load(function(){
//your code
});
The code below it'll wait for the text assets to be loaded
$(document).ready(function(){
//your code
});
I hope it's helps.

More efficient way to wait for all images to load in jQuery

I'm using a mix of .ready() and .load() to execute my desired function.
jQuery(document).ready(function($) {
$("img").load(function() {
// Function goes here
});
});
As you can see, this waits for the DOM to be ready, then on each <img> load, it executes the code.
If I only had one image to load this would be simple.
But the problem is -- what if I have 10 images to be loaded? The function will be called 10 times due to each image loading one by one, and that's not a very efficient way to go about it just to achieve what I want.
So here's the question -- is there a more efficient way to wait for all images to load, then execute the function once?
You could do something like this to avoid having your function run multiple times.
jQuery(document).ready(function($) {
var nrOfImages = $("img").length;
$("img").load(function() {
if(--nrOfImages == 0)
{
// Function goes here
}
});
});
jQuery(window).load(function() {
alert("page finished loading now.");
});
jQuery(window).load(...) will be triggered after all content on the page has been loaded. This different from jQuery(document).load(...) which is triggered after the DOM has been loaded. I think this will solve your issue.
If anybody wants to know, my final result was this:
(function($) {
$(window).load(function(){
// Function goes here
});
})(jQuery);
that's because
jQuery(window).load(function($) {});
isn't a jQuery object, as referenced in this question:
Calling jQuery on (window).load and passing variable for 'No Conflict' code

Categories