I have a facebook like button on my website like that:
<div class="fb-like" data-href="https://www.facebook.com/xxx"
data-send="false" data-width="300"
data-show-faces="true">
</div>
I want to use jQuery or java script to check if this div is 100% finished loading on the page and then do other stuff.
I used $(document).ready and .load to check but non of them worked (they do the function even before the div finished loading). Does this problem have to do anything with the fact that this div contain an iframe from another website ?
what am I doing wrong here ?
UPDATE I just tried this and it did not work at all:
$(document).ready(function() {
$(".fb-like").load(function (){
alert("Loaded :)");
});
});
I believe the issue is that you need to test if the iframe is loaded rather than the div. I would suggest changing your selector to include the child iframe and checking for the load event on this.
$('.fb-like iframe').load(function() {
console.log('iframe loaded');
});
$('.fb-like iframe').on(function() {
console.log('iframe loaded');
});
Related
I have an iframe inside my page.
<iframe id="iframe" src="myurltopage" name="iframe" title="..." overflow-y='scroll' overflow-x='hidden'></iframe>
<div id="spinner"><h3><i class="fa fa fa-spinner fa-spin"></i></h3></div>
I add a spinner on basic-HTML, and inside a function to hide it, if the iframe is the load.
$(document).ready(function(){
$('#iframe').on('load', function()
{
$('#spinner').fadeOut();
}
});
Sometimes, the spinner won't hide even though I see the page is correctly loaded and in the console, I cannot see any open loading processes. I have to reload the page one times, sometimes more, than all works fine.
Did anyone have an idea what it can cause and/or how I prevent this issue?
Thanks a lot.
If you want to hide spinner when all the content is ready on the page (means all the resources are downloaded like images, fonts, css, scripts, iFrames etc) then you can use following code. If you want hide spinner when only that iFrame is loaded please refer the link which I have also entered in the comment.
$(window).on('load', function() {
$('#spinner').fadeOut();
});
Based on the linked info in the comments of the question, from Rahul Raut, i decide to solve it in this way
var init=false;
$(function () {
var innerDoc = ($("#iframe")[0].contentDocument) ? $("#iframe")[0].contentDocument:$("#iframe")[0].contentWindow.document;
innerDoc.onreadystatechange = function () {
if(init==false){ alert("Go"); }
if ($('#spinner').is(":visible") == true){ $('#spinner').fadeOut(); }
return;
};
setTimeout(innerDoc.onreadystatechange, 3000);
});
I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp
I am trying to dynamically load fancybox via getScript and then attach it to a element. I have the fancybox dynamically load inside of a document ready...
So it goes.
documents ready -> getScript
But it doesn't seem to want to attach to my a tag (.fancybox) if I do a console.log jQuery('.fancybox') I get a [] but the element is already loaded? And if I type in jQuery('.fancybox').fancybox(); in the console in Google Chrome it still doesn't work?
Any idea what I am doing wrong?
jQuery.getScript("/fancybox/jquery.fancybox.pack.js", function() {
console.log(jQuery(".fancybox"),jQuery("a"));
return jQuery(".fancybox").fancybox();
});
The element is a simple a tag wrapping an image, and it is NOT dynamically loaded.
<div class="youtube"><img height="181" src="images/youtube-video.png" width="326"></div>
document ready is too early try wrapping it in $(window).load(function(){//CODE HERE}); instead because it needs to run only after DOM has loaded so it can apply your fancybox to your DOM element.
Try this:
jQuery.getScript("/fancybox/jquery.fancybox.pack.js", function() {
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});
});
EDIT: function call fixed
When using $(document).ready(functioon(){alert("Loaded.")}); it pops up the alert box that says "Loaded." even before the page has fully loaded (in other words there're loading still going on like images).
Any thoughts?
$(window).on('load', function() {
//everything is loaded
});
Try out .load() instead.
$(document).load(function () {
alert('Loaded');
}
The load event is sent to an element when it and all sub-elements have been completely loaded.
http://api.jquery.com/load-event/
Using javascript
window.onload = function () { alert("loaded"); }
You can read more about it here.
https://github.com/codef0rmer/learn.jquery.com/blob/master/content/jquery-basics/document-ready.md
I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.
I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);
considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});