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.
Related
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.
(Note: FireFox only)
The Back-Forward cache is a caching system in firefox that runs when the back button is clicked. It will then simply use the DOM from the previous page that is in it's cache instead of reloading the entire page (and re-requesting files).
I'm using piwik (an analytics service), that requires a tracking code snippet to be added to the footer. Upon adding this, the back-forward cache no longer works.
It is my understanding that, if there is an unload event (or beforeunload) the bfcache is automatically disabled. This is likely what is happening here.
Is there anything I can add to make the BFCache work anyway?
To make matters worse, I cannot add any custom code below the piwik code. That one is always last.
I added the code displayed below to try and remove any unload events that are registered, but the BFcache is still not working.
$(window).unbind('beforeunload');
$(window).unbind('unload');
window.onbeforeunload = null;
window.onunload = null;
I also tried:
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, false);
}
window.addEventListener('unload', UnloadHandler, false);
$(window).unload(function () { $(window).unbind('unload'); });
but this too does not work.
I have placed some samples online. Remember to test this with Firefox:
this one shows a working BFcache (you will get an different alert based on whether or not the back button was clicked)
http://users.telenet.be/prullen/bfcache/a.html
Loaded piwik, BFCache no longer works
http://users.telenet.be/prullen/bfcache/b.html
Loaded piwik, tried to unset onload event, but still not working
http://users.telenet.be/prullen/bfcache/c.html
Using unloadhandler
http://users.telenet.be/prullen/bfcache/d.html
Suggestions by #roasted
http://users.telenet.be/prullen/bfcache/e.html
http://users.telenet.be/prullen/bfcache/f.html
More information about BFCache:
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
You can see another demo of the behavior here:
http://www.twmagic.com/misc/cache.html
If you add dom elements, and click the first link, then return - the dom elements are still there. However, if you add an onload or beforeunload event that is not the case. Again, test this in firefox.
Any ideas?
In order to enable BFCache you need to remove beforeunload event listener. It should be the same listener which was added by Piwik code, otherwise removeEventListener will do nothing.
That listener is unreachable outside of the Piwik's source, so one does not simply remove it.
But, if you have a possibility to insert code before the Piwik, you can try to override addEventListener, track added handlers and expose function to remove all tracked handlers at once.
Hey, So this is a rather weird issue, so what we have is a site that the javascript is at the bottom of the page. The html loads first and then we $(document).ready() element events. The issue I have right now is in IE6 (Stupid I know) where if you click on the item that is about to or during the loading of the page, will destroy the binding event. If you wait for the page to fully load then it runs the page correctly.
What I thought of so far:
Create an overlay on the page and then on document.ready remove it so that the click events aren't becoming broken.
Your probably thinking why don't you just push the JS files into the header? Well tuff-noogies can't do that either. (That might help)
Let me know what you think.
Thanks,
$(document).ready() is only executed after the page is loaded. So during the page load, $(document).ready() is still not called and events are still not bound.
The solution is to bind the events as soon as elements appear on the page. It's a bit ugly, but for slow connections, it might be the only way.
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.
i used sometimes a 'loading' method with the javascript onload & onunloadbody events.(www.restaurantebarocortico.com)
Now i'm learning jQuery, and i used the $(document).ready & $(window).unload to replace the old events, but the unload event isn't working correctly.
Does anybody knows another method to call a function on unload? And, if needed, a method to break the unload and do some effect (, i will need this to put an effect showing the loading div on unload).
the flow of the loading div:
it appears on the top of everything (without effect) with an ajax-loader gif at the middle center.
when document is ready, hide it with jQuery function (slow effect)
when document/window is unloading, show it with jQuery function (slow effect again), and break for a while the event (or sleep the time of the effect).
Thanks and sorry my english :P
José Moreira
You cannot prevent an unload or beforeunload event. If you could, people would abuse it to make tabs unclosable.