When embedding a flash object, is there a way to determine when it's fully loaded?
That's my basic question, but for anyone interested in the details behind it:
I am using the (DOMWindow) jQuery plugin. For those not familiar, it's a basic overlay the appears centered on the page, above all other content which is dimmed.
Inside of the DOMWindow, I am embedded a YouTube video. The markup used to embed the video is AJAX injected.
The DOMWindow has a built in loading graphic, but the problem I am having is that the AJAX GET request is completed almost instantly, and for 3-5 seconds, I'm stuck looking at a white rectangle while waiting for the YouTube video to load.
If I could figure out how to determine when it's finished loading, I could code a more graceful loading scheme (using a animated spinner) inside of the DOMWindow.
You should take a look at this page Youtube Player Javascript API. Subscribing to the onStateChange Event and looking for it to return 5 appears to be what you want to do.
I'll leave my original answer, in case it might still be handy. It is below.
You may want to look at this blog entry. He is passing Flash events to javascript to monitor a video. He specifically mentions waiting for the movie to dl and attach to the player. I'm not sure these techniques work with the youtube player.
It you're looking for a more general Flash reference, Flash makes available OnProgress, OnReadyStateChange and PercentLoaded as Javascript properties of the OBJECT or EMBED element. http://www.adobe.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html
The ultimate way to do this is to get some kind of confirmation from the Flash that it is ready to display (as with, in this case, a YouTube API).
Short of that, there's no objective point when a Flash movie is finished loading. Once the first frame is loaded it can display initial content while later content loads, and even if the root SWF file is loaded, it may need to load more external content before it can display anything. (YouTube probably falls into this latter category, as will any service where the content is loaded by the container SWF.)
Related
My wordpress website is using SiteOrigin page layout builder and does a “heavy” usage of SiteOrigin Slider.
I’m doing some performance test with Webpagetest and Google Site Speed and I’m getting awful results on Document Load times.
It seems that the Javascript event onLoad, which triggers the Document Complete is waiting all the images of the slider to load, and thus, giving google’s and the user, the perception that the website is not loaded. The load spinner of the browser keeps spinning until this event is triggered.
Is there any way to avoid the event to “wait” until all the images are loaded?
My website: https://rourevell.com/
WebPageTest url: https://www.webpagetest.org/result/180810_4V_107ce8d0f3c6cdb3889ad1ce039ae25c/
Google Page Speed Insights url: https://developers.google.com/speed/pagespeed/insights/?utm_source=analytics&url=https%3A%2F%2Frourevell.com&tab=mobile
PS: I know I have to reduce the size of the images, because they are pretty big and don’t have the correct size, but IMHO this is another topic and does not discard the current posts’s topic.
Thank you very much for your support guys!
The DomContentLoaded Event might be what you're looking for. It triggers once the dom is ready, without waiting for images, iframes and stylesheets.
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
I have a demo site built in Word Press.
In the head of the template I injected a script tag that loads a special script.
This script does a document.write to load another script from a server.
The script from the server in turn can do other document.write's to load up to as many as 10.
It is extremely important for these to load like this as these scripts make changes to the page before and thus it eliminates any visible change of content to the visitor.
Problem:
I am using a visitor experience recording service that loads my page inside an iframe and overlays it's mouse actions and heat maps.
When viewing the heat maps built in Flash, there is an odd behavior that is causing my script to load asynchronously I presume, cause the result is the page gets cleared because the second document.write is done after DOM ready and thus clears all content.
I am presuming that for some reason the page continues to load as my script runs it's series of document.write's in this particular case.
The only difference from mouse actions recordings that work fine is the presence of the Flash heat map.
I have Googled this to left and right and have found some similar reports some also reporting the added presence of a Flash but not found any clue that would point me towards a solution.
Has anyone see this behavior before and found a solution?
Please do not ask for links as I can only give you the link to the site that has no issues outside the recording service iframe to which I cannot give my credentials to.
Note: Asynchronous loading of my script would cause the default content to show for a second or two then be replaced. This would be visible to the visitor and thus unacceptable.
I'd like for the opener of an iframe to be able to detect each time the user changes pages within that iframe. Using jQuery, I can detect each time a page finishes loading within an iframe via the following:
$('#myIframe').on('load', function() {/*do stuff*/});
However, I'd also like to detect (in the iframe opener) each time a page starts loading within that iframe.
Note: The content that is displayed in the iframe is from a third-party site, so I don't have the ability to insert code there so that the iframe can explicitly alert the opener.
Does anyone know of an event that is fired when a page begins loading? I'm not having much luck finding anything via Internet searches, as most people seem to only be interested in detecting when the iframe has finished loading.
It seems unfortunately that the only way to be sure it will work in most browsers is to use the <iframe onload="myonloadscript();"
The window.onload event of the main page will tell you when the iframe has loaded and you can be sure it has begun it's request for it's src page
Edit:
Just copying it from an article (Their are hacks for this)
doing this cross-domain? Not so easy. You’ll get something along the line of: Child document does not have the right to access parent document. In fact there is a lot of documentation on the web about how to achieve it, but the problem is that it is often outdated, with solutions that often only works in a couples of browsers.
The thing that I want to know is how to create a frame around the site that stays constant and at the same time and change the url in the address bar depending on the actual page being shown. It needs to be able to have an audio element that plays nonstop even if you go to another page on the server.
Pitchfork Website, the player can be seen in the upper righthand corner.
Swapping out content and then updating the URL sounds like a pattern that Mark Pilgrim goes over in http://diveintohtml5.info/history.html
With a little AJAX you can update your content, history.pushState() allows you to change the URL, and then add an event listener to listen to the popstate event (when the user navigates backwards).
This doesn't really give much guidance as to how you should structure your page or AJAX calls but hopefully it gives you an idea of the general concept.
If I understand you, you can include your resource as a template to your site (include it in every page, while taking into account the width and length of your main frame and the resource's size).