Consider the following script:
$(".workSnippet").click(function () {
//set variable portfolioCount based on index
portfolioCount = $(".workSnippet").index(this);
//load content based on portfolioCount
$('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount);
// when loaded, run animation functions
$("#work").ajaxComplete(function(){
//help required here
setTimeout(invokeMultipleCycle, 200);
showWork();
});
On my page, there are multiple 'thumbnails' called .workSnippet. When you click one of these, I want it to load content via ajax. It selects what content to load in conjunction with the index function. I have this working absolutely fine.
The problem is, it's a little messy. When you click .workSnippet it runs an animation, however the high quality image loads slowly whilst the animation is taking place.
What I want to do:
Wait for the ajax request to complete before loading the functions invokeMultipleCycle and showWork.
Before the animation occurs, add an ajax loading animation absolutely positioned above .workContent.
Please bear in mind two things:
There are multiple .workSnippets on the page.
The content is not loaded in workSnippet, but another div called #work.
You will see I have already tried to attempt this uses the ajaxComplete function. However, it does not seem to work. Perhaps this is because the ajax request completes but the image still needs to 'load'?
Your help will be most appreciated.
Thanks,
Steve
Perhaps this is because the ajax
request completes but the image still
needs to 'load'?
Yes. You have to do the animation after the images load. I can't think of a way to do that off the top of my head; I think looking into something similar to document.ready() is the solution.
Related
I'm running a front-end script for this to test out some images, and timing is funky, which makes this unique.
I need a way using Javascript to catch an img when the request to the endpoint is made to load the image. I know the image endpoint ( say www.domain.com/directory/number.jpg ), and I want to change that and point to a different endpoint ( say www.differentdomain.com/directory/number_2.jpg ).
I've tried finding the element and changing the src attribute, yet the element seems to be loading onto the page after Document Ready, so there is a long interval of polling the page to find the element.
This is all front-end, to run as the page loads and after, waiting for a user action.
Please note, a setInterval that continuously runs doesn't catch this as precisely as I'd like and it adds a lot of resources to the page for it to run long enough. What other options are there?
I've tried using jquery and polling for the selector in a setInterval, yet this adds a lot of resources to the page to poll every 10 ms and catch this. The problem becomes assigning the event listening to an element that's not yet on the page.
I've just come across Javascript Promises - and am curious if there's a way that would work, though I'm open to ideas.
Thanks!
Did you try to change the src attribute with an IIFE function instead of Document Ready? As much as I understood you are having problems with the slow load of the image element. With IIFE your code executes immediately without document is ready.
Here is JSFiddle example with Document Ready
$(document).ready(function(){
//some code
}
Here is JSFiddle example with IIFE
!function (){
//some code
}();
P.S I'm sorry if i misunderstood your question.
I have an element that has a class added to it on page load, via jQuery
jQuery(document).ready(function(){
$('.service_info_container').addClass('hide');
});
The class applies display: none; to the element, the issue I'm facing is that on page load, for a split second you see the element and then it disappears as the class is added it to, but I can't figure out why there is this delay. I have made sure my jQuery library and JS file are added before my stylesheets in the header, but it makes no difference. The staging site this occurs on has no form of script defers or similar optimizations.
It's my understanding that using jQuery(document).ready should fire right away once the script is loading in the DOM, or am I wrong and it needs to wait for other things like all images being loaded first? I acknowledge there are other approaches I could take but I really want to know why this one presents this issue. Thanks for any help in advance.
I love this plugin:
http://jquery.malsup.com/block/#demos
The iPhoto (ish) one works beautifully on my site so far. I click a button, the block appears and the new page loads.
However, I'd like to set the setTimeout value to be when the next page has completed loading. So once the page fully loads, the block disappears.
How do I achieve this?
Thank you
I think you must be using ajax to reload the content.
You could do:
$('#TheLastElementThatYouReload').ready(function () {
// set timeout / hide block
});
I'm unsure why you need a timeout, but this way you won't need it.
If you load the new page via ajax, in this page:
http://jquery.malsup.com/block/#overview
there is this:
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
which sort of binds itself to every ajax load. I guess instead of setTimeout you should put an event to the end of loading a page since setTimeout works only with time and "guessing" a page's loading time does not make much sense
Hope this helps
I don't know how you are loading the pages but if you can send a function when the page does load, do something like this:
function page_loaded(){
$.blockUI({
message: 'page loaded!'
});
}
I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.
i am trying to make the preloading work in such a way that the components i wish to preload start to load after successfully loading the page.
for example,
i have index.php. i want it to load up completely.
as soon as it loads up i want to start loading the other components.
to make things clear. i have a nav that makes use of large size images. if i load them along with the index.php file, it would increase load up time of the page. i wish for those large images to load after completely rendering index.php?
am i making sense? is it possible?
Just attach your preloading function to the window object's 'load' event. Load fires after the page (and all external resources) are completely loaded.
This is different from the "DOMReady" event that various libraries like JQuery provide (as in Ivo's answer). $(document).ready(fn) will fire off once the DOM is ready (meaning the complete http document has been received/parsed) but does not wait for external resources (images, css, etc) to download.
Instead, you want $(window).load():
<script type="text/javascript">
preLoadStuff = function(){
//code that does preloading goes here
}
$(window).load(preLoadStuff);
</script>
That will trigger your preLoadStuff handler after all images, etc, are completely loaded.
The images are loaded almost in parallel to the PHP program execution. That is actually depends on the time it takes to execute your PHP program, the speed transfer of the data that you output to the browser etc.
You shouldn't try to load those images after processing index.php, that wouldn't help, because that your server is the one who process the PHP script, while the browser is the one who should fetch the images.
Having your PHP program to output the image tags as soon as possible is good and improves user experience.
I don't think you understand how a webpage works. The index.php file will execute everything it needs before any HTML output even begins processing, which takes mere milliseconds. Then HTML will begin to load everything in the order it appears on the page. The page doesn't wait for the images to finish loading before it displays anything. It will display the outline of the page as it has been loaded so far and as the images finish loading simply insert them into the correct place. It sounds to me like what you want is already the way things work.
$(document).ready(function() { YOUR CODE HERE });
http://api.jquery.com/ready/