I have a jquery script that changes an element to fixed when the page is scrolled.
The problem is that the script won't work until the page is fully loaded, and it can take some time
Is there a way to start the script as soon as the user enters the page, without having to wait until it finishes loading ?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var menuOffset = $('#ribbonmenu')[0].offsetTop;
$(document).bind('ready scroll', function() {
var docScroll = $(document).scrollTop();
if (docScroll >= menuOffset) {
$('#ribbonmenu').addClass('fixed');
} else {
$('#ribbonmenu').removeClass('fixed');
}
});
});//]]>
</script>
Yeah, put it outside:
$(window).load(function() {
That will answer your question about wanting your script to run instantly, however there are issues beyond just moving it outside the load function.
As Marc B said, your script which calls upon an HTML element will not run if it is outside your load function because for a very, very, small time period the HTML hasn't loaded and your script will not see your HTML.
This will cause an error thus making your script not work as intended. Therefore you should keep it inside the load function and instead look for alternative ways to speed up your server/script.
Rather than using $(window).load(
you could try using $( document ).ready(.
It will load sooner, but as others have mentioned, there isn't a way to get it to load instantaneously and still work. This is because future elements will not have loaded yet.
Related
My website is : https://365arts.me/
So it loads about 16mbs of pics(Yes I know, I'm stupid. I'll try to change it very soon, also if someone could tell me a way to reduce size of do something else(like dynamic loading only when needed, if something like that exists) I'd be very grateful).
I added a preloader for it using:
[html]:
<div class="spinner-wrapper">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
and corresponging [jquery]:
<script>
$(document).ready(function() {
//Preloader
$(window).on("load", function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});</script>
this works well but the problem is I have a javascript code that comes and says Hi! but it runs only for 2.8 seconds. So if loading takes up more than that, It doesnt show up. Can someone please tell me how to make sure that it loads only exactly after loading is completed.
Thanks a ton.
Code for my website:
https://github.com/richidubey/365-Days-Of-Art/blob/master/index.html
this may work
document.addEventListener('DOMContentLoaded', function() {
// your code here
}, false);
if you are happy with pure javascript
My first suggestion is to just get rid of the "Hi!" message since you already have a splash page in the form of the loader. But if you really want that second splash page, you can use the JQuery when() method:
$(window).on("load", function() {
$.when($('.spinner-wrapper').fadeOut(500)).then(displaySplashPage);
});
This assumes that displaySplashPage() is your function for showing the "Hi!" message.
You don't need $(document).ready() and window.on("load") here. Document ready waits for the HTML to be built, then applies event listeners/functions/etc to the structure. Window onload waits for everything to get loaded, then fires. In your case, you're trying to wait for all your pictures to load, so you only need onload.
You might need to have a container around all your main content set to opacity: 0 that switches to opacity: 1 as part of displaySplashPage(). That would prevent things from leaking through as you do the .fadeOut() on the loader.
JavaScript version - run js code when everything is loaded + rendered
window.onload = function() {
alert("page is loaded and rendered");
};
jQuery version (if you need it instead pure JS)
$(window).on('load', function() {
alert("page is loaded and rendered");
});
You can try this:
<script>
// Preloader
$(window).on("load", function() {
fadeOutTime = 500;
sayHelloDuration = 5000;
function hideSayHello() {
var sayHello = $('.say-hello');
sayHello.fadeOut(fadeOutTime);
}
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(fadeOutTime);
setTimeout(function() {
hideSayHello();
}, sayHelloDuration);
}
hidePreloader();
});
</script>
Also, remove the code from lines 83 ~ 87:
<script>
$(document).ready(function() {
$('.say-hello').delay(2800).fadeOut('slow');
});
</script>
About your website performance, you can improve a lot of things right now:
Use smaller thumbnail images on your front page, don't load FULL SIZE images at once. "work-showcase" section is really heavy without real necessity.
Try to incorporate src-set and smaller images for small screens, larger/heavier images for bigger screens. All modern browsers support it, and it will improve performance/loading speed.
Try to lazyload your big images, e.g. only when users scroll down to them, not before. It may take some work to integrate it with your image viewer, but it will additionally speed things up on initial load. My favorite library for this is this one: https://github.com/aFarkas/lazysizes but, you may find something else...
Unrelated to your original question, I have noticed that you have a bug in your HTML - see this screenshot. What kind of code editor do you use? Instead of empty space it apparently inserts invisible dots symbols which are not good. Actually, it's not the invisible dot (that's my editor's space indentation symbol), it's caused by 2 long dash (instead of short dash or minus) in your code after opening html comment tag:
I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.
Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});
I have placed this inside of my jsp file:
<script>
jQuery( document ).ready(function() {
jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
});
</script>
If I run this directly in Chrome's console, it works with no problems. If I load the page, the #resrcTypesTree id is set to 10px (a css default). I cannot figure this out as to why it appears to not be setting the height of the resrcTypesTree to the secondColumn's height. Is there something else that I am missing? I could put in a pause to check the page after a unit of time goes past, I just feel that is hacky.
The $ for jQuery is being overridden by another library in the project that is why I called jQuery instead of the '$'.
Can someone point me in the right direction please? Thank you in advance!
RR
Depending content you are targeting but as a simple fix, you should wait all content to be loaded:
jQuery(window).on('load',function () {
jQuery('#resrcTypesTree').height(jQuery('.secondColumn').innerHeight() - 10);
});
This ended up being an ajax issue. I had to write a mediator function since there are more than one ajax call being ran. 95% of the time the re-size works once put into the ajax script, however the 5% of the time, the secondary ajax call would get done first, causing the page not to re-size the gradient correctly.
I've searched this a bit on the forum, and can't seem to figure out how to fix the common issue of white flashing when a new page loads.
I've tried Chris Coyer's example of placing this above my other javascript:
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
but, still flashing. I'm a noob to javascript, so I'm not really sure what I'm doing wrong.
The page that is the worst is: http://thegoodgirlsnyc.com/test/new/index3_7.php
If you're using Jquery try wrapping your function with:
$(document).ready(function(){
/* Code goes here */
});
This will execute your code when the document is ready (fully loaded)
The problem is that you're executing tasks throughout the pageload. You're getting the flashing because code is being run in-time with page load.
You need to abstract the running of the code behind a unified point. This is where things like $(document).ready() are nice from jQuery. It happens upon DOM completion, but before window load completion. This means it happens before visual, which prevents screen flash Javascriptiong.
It seems like you're worried about the global namespace:
jQuery( function($){
$('iframe').hide();
$(document).ready( function(){
$('iframe').show();
});
});
This is an easy solution that alleviates the namespacing issue, and you won't have to refactor current code. So my answer is two parts:
Use jQuery.
Use namespacing.
If you still get screen flashing using the above, you need to set the display to none in the stylesheet for the iframe element.