Holding old image until new image is ready to update - javascript

I am using setInterval and the jQuery load function to periodically update an image tag.
var refresh_days = setInterval(function() {
$('#box_name').load("dynamic.php");}, 1000 );
This works, but there is a slight delay before the new image is fully loaded, during which nothing is shown.
Is there a way I can wait until the new image is loaded completely, and then display it, so that the image changes instantaneously from the user's perspective?
My target browser is Chrome and I do not need this to be compatible with IE.
Thanks,

You could load the image into an invisible <img> tag, and use the "load" event to update the visible one.
$('#hiddenImage').attr('src', newImageUrl).load(function() {
$('#realImage').attr('src', newImageUrl);
});
That way you know it's in the cache, so the update to the visible image should be pretty quick.
If you're reloading a whole chunk of stuff, then you're going to have problems because the "load" action will update the page and then the browser will start the HTTP transaction to satisfy the implicit "GET" request in the <img> tag. What you could do, therefore, is:
Load the whole blob into a hidden <div>
Have a live() handler waiting for the "load" event from the image tag in the hidden div;
React to the "load" event by moving the DOM subtree from the hidden div out to the place you really want it.

Try using the get() method instead...
$.get("dynamic.php", function(result){
$("#box_name").replace(result);
});

I'm thinking .load may be causing problems for you since you're actually reloading the entire HTML structure within that section of your HTML code.
Instead of using .load, I'd try using the jQuery.ajax() method. Attach a method to the success option which takes the returned image and swaps it in over the old one. This way, you're just using CSS to swap out the image rather than manipulating the DOM.
Look at http://docs.jquery.com/Ajax/jQuery.ajax#options for more info.

Related

What's the best way for me to refresh the same image, and restart the animation of a gif/apng without reloading the entire page?

The image doesn't update, it's the same exact image in every way. I'd just like for an animated image i've created to cycle only once to refresh itself, or even reload after some information is changed triggering an if-statement.
I've looked up a lot of answers and most of them seem like I need to add a random ?blahblah to cache bust the browser into thinking it's a new image and redownload
how can I add a timestamp to the end of
background-image: url('imgur.com/blah.png?timestamphere');
use given variable for timestamp
var timestamp= new Date().getTime().toString();
var dynUrl='imgur.com/blah.png?'+timestamp;
document.getElementById("yourelementid").style.backgroundImage = "url("+dynUrl+")";
I believe using a DOM method should trigger a re-render, but this applies to a img src, not a background-image. (One thing to consider with using background-images is that you can't easily add an 'alt' tag for non-sighted users or users who don't load images)
document.getElementById('myImg').setAttribute('src', '/myimg.jpg')
// setAttribute is a DOM method, so the browser should be notified that the DOM has changed.

Get HTML from a hidden portion of code in a page

The title is a little confusing so let me explain better what the problem I'm having is.
I need to extract a certain portion of HTML out of a page. This portion of code is inside of a div that "on page load" is hidden by default. You have to click on that div in order to make that portion of code appear.
Now, I need to get this code with a javascript/jquery script with either pure AJAX request to the page or YQL but the problem is: How do I "simulate" the click on that div?
How can I make that div toggle just with the code in order to access the code inside of it?
By the way, the request is from the same domain so there's no problem with cross-domain AJAX.
Thank you!
You can use Jquery .click
$("#Id_Of_the_Div_you_want_to_click").click();
As far as my understanding is if you do
$('#hiddenElementID').html() will return the contents of it or even $('#hiddenElementID').text() if its hidden or not.
But if you really must simulate a click then do $('#hiddenElementID').click()
And to toggle use your own function and do $('#hiddenElementID').hide() and $('#hiddenElementID').show()
Or use $('#hiddenElementID').toggle()
http://api.jquery.com/toggle/
Maybe you should try on Ajax success:event
function(data){
//Convert Data to jQuery Object
var element = $(data);
element.find('#HiddenDiv').show();
}
Because manipulating DOM Element's triggering Fake Event's is a bad idea.
You can simulate click events like so:
$("#div").click()
It sounds to me like you're trying to get data from another page. The data is compiled after a click event. You could try the following:
AJAX get the page with the required data
Render the page into a hidded iframe within your page
Simulate click events on the nested page to produce data
Access the bits you want and discard the iframe contents.
If I get some time later I'll try it out for myself and see if it can be done.

Reload a javascript widget based on a time interval

http://jsfiddle.net/4B2Bc/1/ <- the link to the widget
I have this javascript widget, which I want to reload every 60 seconds so the content on it is refreshed. However the problem is that whenever I use set timeout or anything else within the widget or outside the widget, the whole screen goes black when the widget refreshes.
In the debug window I can see that the json file for the new content is retrieved with the right content but it doesnt apply.
So the only other method I was left was to keep on writing the <script type="text/javascript" src="http://domainsoutlook.net/wjs/12_61532/" charset="utf-8"></script> tag which reloads the whole js and refreshes the widget, but the problem with this is that it happens quickly and at once, not periodically.
Any solutions guys...I am willing to use jquery in the widget if it is going to help.
Your script erases the page because you're using document.write:
Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call.
And document.open:
If a document exists in the target, this method clears it.
So if you call document.write any time except when the document is being initially loaded, you'll replace the entire document with what you write.
Don't use document.write to do your updates, just use a bit of AJAX to reload some new data from your server and then replace just the parts you need to replace using what ever DOM manipulation or jQuery techniques work best.
Once you have that working, use setTimeout or setInterval to arrange calls to your server for fresh data.
using jquery you can set an interval, which is like a timer.
$(function() {
setInterval( "refreshWidget()", timeinmilliseconds );
});

How to make $.get() data available to js?

I am using $.get() to load new content into a div. The content includes a list, each row having a title and a hidden description.
I have a separate jquery call that is meant to toggle the hidden div for each row when clicking on the title, which works fine when the data already exists (default content loaded with the page), but when it's dynamically replaced with a $.get() call, the divs then seem to become invisible to the command..
Any ideas? Do I need to somehow get javascript to refresh it's version of the DOM?
TY
Try this instead. This will bind elements that are inserted after the page loads:
$(".show_link").live('click', function (e) {});
The way you are binding the command it only happens when the page loads, so it will only bind those elements that match the selector at the time the page loads. Since you are inserting the markup after the page loads, jquery does not know those elements exist and therefore not wired to your function. Like I said above, try using .live() instead.
The DOM should update automatically. Are you sure the content you're loading has the appropriate Ids?
Try manually browsing to the URL used in the AJAX call and compare what you get with what's originally in the page. It's also possible you're retrieving spurious tags (html, body, etc) which may interfere with your JQuery selector

Problem getting Javascript variable to hidden input value

I'm trying to create a system where you can drag and resize divs (jquery ui) and then save the positions and sizes to a css file.
I already got the system working with one div, but now that I tried to update the system to support multiple divs, I ran into a problem.
The source: http://ezmundorf.110mb.com/problem.txt (It's ugly, but I'm pretty much just trying out how stuff works).
When I click the #update div the page goes blank and source for the page is only the form starting tag. The page is trying to do something since firefox is displaying the loading graphic.
If I remove the line the that writes the hidden input fields, I get to see the save button, yet still there's something wrong with the javascript since browser just keeps doing something.
I'm sorry for posting such a "fix this code for me" question here, but I don't know how to explain it without whole code and I couldn't find answer anywhere.
You can't use document.write after the page has finished loading without it overwriting the whole page, as you're seeing.
You should use .innerHTML on some container, for example:
$('myDiv').innerHTML = '<form>...</form>';
or use DOM methods:
var form = document.createElement('form');
var body = document.getElementsByTagName('body')[0];
body.appendChild('form');
You can't use document.write after the page has finished loading (e.g. in an event handler, including $(document).ready). Instead, you can use the jQuery method .html(val) to change the contents of an existing element, or insert new elements into the DOM with the other jQuery manipulation methods.

Categories

Resources