I am using ajax to load content from another internal page into a div because that content takes a long time to generate (about 10+ seconds typically).
I have noticed that I am not able to click on any links on the parent page until the .load page is fully loaded. More precisely, I can click on the link but the browser waits for the content to finish loading first before it brings me to the next page.
How can I allow this?
My code is below:
<script>
$(document).ready(function () {
$('#content').load('http://samesite.com/slow-loading-page.php');
});
</script>
<div id="content"><img src="images/loading.gif"></div>';
Related
Suppose i have 4 html pages say a.html,b.html,c.html and d.html.
Initially when i run the program i load a.html, when the user scrolls to the top and if it is already the top the alert says "you have reached the top of the page and this is the first page".
Now when i scroll dowm, using the js way of detecting page end, when i reach page bottom i call the next page and load the next page that is b.html.
In this way when it reaches d.html and you scroll down to the end of the page its will alert you that "you have reached the page end and this is the last page".
Same method is used when i scroll up and when it reached the page top, js will call the previous page function and it will load the previous page.
in here i will load the previous page bottom first. this is also working fine(but there is no continuity)
This strategy is working fine. But i need a mechanism to load these html pages continuously so that it will load the webpages in a neat fashion as if i open a pdf doc in a doc viewer.
Like the next and previous page swaps are smooth rather that opening it as a new page(this is very important in the case of previous page calls).
Is there any library in jquery or java script for this functionality?
someone please help. I searched a lot for this functionality
If you want to load HTML documents onto a webpage, you can use jQuery's .load() function.
Syntax:
// $ is the same as jQuery
$(element).load(documentURL);
Here, .load() gets the HTML from the document and puts this HTML into the element specified. To get specific elements in an HTML document, just locate them as you do in CSS. If you wanted to get the header from the document:
$("#result").load("myDocument.html header");
Remember: If you are loading the HTML on the DOM page load, use $(document).ready();. Here's an example:
$(document).ready(function() {
$("#result").load("myDoc.html body main");
});
I have page 1 and page 2, A button in page 1 takes a user to page 2. I want a javascript to wait till page 2 has fully loaded before displaying it when the user clicked the button in page one, In between I need to put loading gif, so that visitor will know that something is loading.
How can I achieve that using pure javascript?
No jQuery please.
EDIT:
The javascript has to be pasted in page one, so that the button would be the trigger, do note that we can't load page 2 in div as some might suggest to load page two in div, then read if page two is fully loaded then display div.
window.onload
might be what you’re looking for
document.addEventListener("DOMContentLoaded", function(event) {
//Your code
});
I have built a portfolio site which contains an iFrame to display artworks. To display each artwork an html page containing a large image is loaded into the iFrame.
The iFrame is hidden whilst empty (display:none) and is supposed to fade up only when the content is fully loaded.
//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));
//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
$('#creativeiframe').fadeIn(300);
});
I had this working as expected - the iFrame would only load up when the content including the large image that had loaded completely, but slow loading prompted me to try preloading the artwork images so they would start downloading before the user clicked to load them into the iFrame.
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
Now I have a problem - sometimes when a user clicks to load an artwork the iFrame will fade up showing a half-loaded image, or worse just showing the html content without the image loaded. I have looked at Chrome Dev Tools Network inspector and this appears to occur when the image in question has started preloading, but not finished.
So my questions are:
Does anyone know why this is happening? Is it because with the preloading there is no network request for the image when the iFrame src is changed, so the .load event doesn't wait for the image to load?
Is there a way I can get the iFrame .load event to wait for the 'half preloaded' image to finish loading before firing?
I got this to work in the end by running a script in the child HTML document to detect the image load. This then triggers a 'fade function' in the parent document which fades up the containing iFrame.
<script type='text/javascript'>
var img = new Image();
img.onload = function(){
window.parent.fadeFn();
}
<?php echo"img.src='".$fileNameVar."'"?>
</script>
There is also a .load() function in the img tag, which can be used to show whether the image is fully loaded or not.
So I think you can use the .load() function to enable/disable the iframe click.
Or show an waiting indicator, maybe better.
EDIT: this is incorrect, I was confused The load event is fired when the DOM is fully loaded, but that doesn't include external images.
You should be able to do what you want with the ready() event:
//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe");
//fade up iFrame once content loaded
creativeIframe.ready(function() {
creativeIframe.fadeIn(300);
});
i have an index.html file that holds:
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var deviceuid = device.uuid; // gets the phoneid
alert('index');
checkUser(deviceuid); // this is some function i made
}
from here if everything works OK i will load another page called page1.html that has some text and a link:
Page 2
the page2.html has some other text and a link that goes back to the homepage:
Go to Index
What happens is that when i start the application i can see the alert and the other script running, but when i click on the link to go back to the index.html the page goes blank and no alert is shown
any ideas ? do i have to run some other code that refreshes the page?
edit:
i could use: <a href="#" onClick="document.location = 'index.html';" >Go To Index</a>
but it doesn't seem to work on the mobile device only in browser
You are describing standard browser behavior.But jQuery mobile performs page loading default per AJAX, see http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html.
This means that the first page ("index.html") is loaded and onDeviceReady is executed. When you click the link to the second page ("page2.html") this page is loaded per AJAX, is inserted into the DOM of the first page and is displayed.
When you click on the link to the first page, no loading occurs because both pages are in the DOM and the first page is displayed again without triggering onDeviceReady - this only happens on the first load.
You can turn off AJAX loading when you add to every link rel="external".
However, you should use AJAX loading and its advantages. Read http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html - it explains in detail when a script is executed. I think you should put your code in the pagechange- or pageshow-event, see http://jquerymobile.com/demos/1.0.1/docs/api/events.html.
I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers