Delay external javascript load by seconds - javascript

I have ONE external JavaScript file containing jQuery, Cufon, fonts, and the replace functions. I need this file to be loaded twice once on page load and again 3 seconds after page load. Is this possible?

Don't load it twice. Wrap what you have in it into a function, then call the function once when it loads, and once more after three seconds. For example, you might have something like this in your JavaScript file:
doSomeProcessing();
doSomeMoreProcessing();
Change it like this:
function myJavaScriptFile() {
doSomeProcessing();
doSomeMoreProcessing();
}
setTimeout(myJavaScriptFile, 3000);
myJavaScriptFile();

I don't think you need to load it twice. How about the following?
setTimeout(function(){Cufon.refresh();},3000);
disclaimer: I know nothing about Cufon and gleaned my knowlege from here

setTimeout(jQuery.getScript( url, [ success(data, textStatus) ] )),3000);
http://api.jquery.com/jQuery.getScript/

Related

Design a header script to run after the document is finished loading

I have a javascript function, "loadFramework()" that modifies an HTML document. Specifically, it repeatedly runs the jQuery command $("#element-id").load("document/name.html"), which injects the HTML in document/name.html directly into the element with #element-id.
Originally, I ran loadFramework() in a script in the document's header. However, since then I've realized that the function fails if the page has not loaded yet, since it relies on there being an element with #element-id.
I can't figure out how to get this function to run when it should. A simple solution seemed to be setting it to be the document.onload function:
document.onload = function() {
loadFramework();
}
But in this case it never seems to run at all.
How do I make sure a header function runs only after the document has loaded?
You should use window.onload if you are looking for a vanilla JS option
window.onload = function() {
loadFramework();
}
Jquery load takes additional argument "complete". You can run the javascript there. So the code would be:
$("#element-id").load("document/name.html", function(){
loadFramework();
});
You can also use $(document).ready(function{loadFramework()}) inside the html you are loading.
If you want to execute the loadFramework() method after "document/name.html" is loaded, I would suggest the following code.
$(function() {
$("#element-id").load("document/name.html", function(){
loadFramework();
});
});

How to run a javascript function when a page dynamically loads content

I am currently writing some Javascript code that adds some tags across text in an HTML file after the page loads. I use the
window.onload
method for achieving this.
However, I am facing an issue in pages like google plus, where you get more content as you scroll down. Is there a way of calling my JS function when such a page adds more content?
Thanks
Akshay
There are several ways how to get this working. You can either use jquery like this:
$('#mydiv').bind("DOMSubtreeModified",function(){
// your code goes here
alert('changed');
});
Note that this is not supported in IE8( and below).
Or you can run loop and continuously fire the desired code:
var interval = setInterval(function() {
// your code goes here
}, 1000);
Fiddle: http://jsfiddle.net/8RF5r/5/

Load file when another load is done

So I basically have a load that loads the file to an id and when that load is done I want to load another file to an id which is inside the first load.
Does it sound a bit weird?
We can add a bit of code to describe it easier.
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php');
}
That is how it looks right now. I want to add this line
$('#interests_list').load('/snippets/interests_list.php');
but if I just add it, it doesn't load. The reason might be that it tries to load before the load above is done. That is a problem because #interests_list is loaded with the first load.
How do I make the second load to start loading when the first one is finished?
load() method accept a complete callback:
function interestsList() {
$('.interests_editlist').fadeIn(500)
.load('/snippets/interests_edit.php', function () {
$('#interests_list').load('/snippets/interests_list.php');
});
}
you can use .load() callback to know when load is complete
try this:
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php', function() {
//callback function when the first load is complete
$('#interests_list').load('/snippets/interests_list.php');
});
}

how to specify the view or controller for running javascript 'document.ready'

I want to run javascript like bellow when the page is loaded.
$ ->
$.getJSON '/memos.json', (data) ->
$.each( data ), (key,memo)->
$('#memos').append( "#{memo.title} #{memo.content}<br/>")
but I want to run this only after 'users/show.html.erb' is loaded.
the view is like bellow
<div id="memos"></div>
I think there are two approaches to do this.
One is to specify the views loaded, and the second one is to specify the controller.
I don't think writing javascript on erb file is a good idea.
Is there any way to implement them?
thanks.
the
$ ->
..
on the first line, will be translated to
$(function() {
...
});
which is basically is a shorthand for JQuery's
$(document).ready(function() {
...
});
which means that the script inside of this function will only be executed once the DOM is ready.
so You could save the javascript into separate file let say js/memos/index.js and within your view app/views/memo/index.html.erb' you would have the` and on the same file you can include the javascript with javascript include tag.
The javascript will only be executed once DOM is ready, meaning at that point you will already have the div.
More info on JQuery's ready http://api.jquery.com/ready/

jquery: on demand plugin loading fails if alert not present

I'm using the jQuery Loader plugin to load files on demand- tagit plugin.
The issue is that if I add an alert to the callback function fired on load the plugin loaded seems to work, if I remove the alert, the plugin fails.
Any ideas why is this happening?
$(document).ready(function(){
$("#mytags").Loader(
{
url: [
'media/plugins/tagit/css/jquery-ui/jquery.ui.autocomplete.custom.css',
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js',
'media/plugins/tagit/js/jquery-ui/jquery-ui-1.8.autocomplete.min.js',
'media/plugins/tagit/js/tag-it.js'
],
success: function(target) {
//alert('loaded');
$(target).tagit({
availableTags: ["tag1","tag2", "tag3"],
values: ["tag2"]
});
}
}
});
Im testing this on my local XAMP environment.
The possible reason why blocking code execution with alert() helps is that, while JavaScript execution stops (including intervals and timeouts), external resources (JS, CSS, images, and xmlhttprequests) may finish loading. But, again, until the code following the alert() completes, none of these external scripts will run and no DOM events will fire.
An example when alert() makes a difference: http://jsfiddle.net/p9Nff/
It's problaly related with async, do you try to force async to false?
When the alert open the script have time to load your plugins. or it's what Alexey said, your DOM is not ready, put your code into $(function(){ /code here/ });

Categories

Resources