I need to run some JQuery code after the page completes loading but although it's working on desktop browsers it's not firing the event on Safari Mobile.
This is the code:
$(window).load(function() {
//Alert('event was fired');
});
I'm also using JQuery Mobile ... don't know if it has something to do with the problem.
This script will only fire on the initial page load, as all subsequent page transitions are AJAX based and will not fire a document ready or window load event.
The closest match, given your requirements is the pagechange event, provided by JQM. This fires after page has been loaded into the DOM and the transition animation has completed.
$(document).live('pagechange',function(){
//your logic
});
Related
I have noticed a strange issue that when using Googles recaptcha, the jQuery $(window).on("load", function (e) { event wont fire ($(document).ready(function () { or window.addEventListener('load', function () { won't fire as well). When I reload the page using F5 it works as intendet.
I noticed that a recaptcha network request is cancelled, see the attached image. When I reload the page the request doesn't fail.
I found a workaround:
When I load the recaptcha js via ajax (see below), the event handlers fire on the initial page load.
$.getScript( "https://www.google.com/recaptcha/api.js");
I have an issue with my Javascript not working in Firefox.
I'm fetching images for a page from external sources (IP cameras). Where I am unable to fetch an image, I want to serve my own placeholder image so I don't show the browser default broken image. The solution I have works perfectly in Chrome. However, in Firefox it is automatically loading the missing image - but if I refresh the page it then works perfectly.
The code is:
$(function () {
// Replace Broken Image
$('img').error(function(){
$(this).attr('src', 'https://www.evercam.io/img/error.png ');
});
});
Does any one know why this wouldn't work in Firefox?
Cheers,
Ciarán
it about event binding use on/live instead.
https://api.jquery.com/on/
basicly what happens is it only bind event to imgs already there for more check JS event delegate.
try $(document).on("error", "img", func...);
basically document can be anything (selector, or object) that is a parent of actually element that triggers the event. what happen is with the event bubbling parent click event also get triggered and in the event jquery checks the trigger has given selector.
Cheers.
I am trying to implement the jQuery orbit slider. I have a div tag that contains several images. The problem I am encountering is the orbit() function is on occasion being called before all the images have loaded. I have tried to solve this by surrounding the orbit function call as follows:
window.onload = function(){jQuery('#img-container').orbit()}
This should ensure that orbit is only called after the page and all the content (including the necessary images) have loaded. However, the onload event is not consistently firing because the image slider does not always load. I notice that if I clear the cache and navigate to the page, then the onload event does not fire, and thus orbit never fires.
Other things I have tried:
I have also tried jQuery(window).load() which was unsuccessful. I also tried iterating over each individual image in the container with the .load() function but was not successful. I have been able to resolve this issue on Chrome and FF using something similar to this approach: jquery .one() load and error events not working
Does anyone have any other suggestions to fix this in IE?
ADDITIONAL INFO: I did a test where I use deelay.me to delay the image by a few seconds and doing so made the onload function work consistently. It's only when the image loads quickly that the onload doesn't seem to fire
The proper way to do this in jQuery using the jQuery function:
$(function(){
//onload stuff here...
});
That should work in IE as well as other browsers.
I need some advice. I have a web page and want to extend it's functionality with greasemonkey script and firefox.
When page has loaded I need run custom function during user's page scrolling (with mouse whell or scrollbar). I want show some div block when user scrolling down and hide it when he scrolling to the top.
But I met some problem - I couldn't assign event handler to the onscroll event. I use next part of the code:
function showFixedBlock(){ ... }
function onScrollStart(){ ... showFixedBlock(); ... }
window.onscroll = onScrollStart;
I test this piece of code on my test html page and it works, but when I copy it into greasemonkey, script doesn't work.
Should I assign onscroll event handler during page loading? As I know greasemonkey execute it's scripts when page has loaded? Is it the reason of the problem?
Is there some additional requirments to handle 'onscroll' event? How can I do that?
Thanks.
I may be wrong, but I think that this should work:
unsafeWindow.onscroll = onScrollStart;
or
window.addEventListener("scroll", onScrollStart, false);
You should really use the latter example.
Just a simple question, for the jQuery event. Are the .load(), .ready() and .unload() run in order when the DOM is loaded? The answer seems yes when I see the jQuery Documentation.
<script type="text/javascript">
$(window).load(function () {
// run code
initializeCode();
});
$(document).ready(function() {
//run code that MUST be after initialize
});
$(window).unload(function() {
Cleanup();
});
</script>
However, the code inside the .ready() is execute before the initializeCode(); is execute, so I feel really strange. And now I have to place my code inside the .onload() method and just after the initializeCode(); line, which means to be inside the .ready() block.
Could someone explain me more about this, as I am new to jQuery?
NOTE: .load() & .unload() have been deprecated
$(window).load();
Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.
$(document).ready();
This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.
$(window).unload();
This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.
To sum up, ready() will be fired before load(), and unload() will be the last to be fired.
window load will wait for all resources to be loaded.
document ready waits for the document to be initialized.
unload well, waits till the document is being unloaded.
the order is: document ready, window load, ... ... ... ... window unload.
always use document ready unless you need to wait for your images to load.
shorthand for document ready:
$(function(){
// yay!
});
If both "document.ready" variants are used they will both fire, in the order of appearance
$(function(){
alert('shorthand document.ready');
});
//try changing places
$(document).ready(function(){
alert('document.ready');
});
Also, I noticed one more difference between .load and .ready. I am opening a child window and I am performing some work when child window opens. .load is called only first time when I open the window and if I don't close the window then .load will not be called again. however, .ready is called every time irrespective of close the child window or not.