CODEWITHSUNDEEP
jquery
Ken Williams
Ken Williams

Reputation: 939

jQuery - why doesn't attr.src change?

I have an image that when click I want to have changed and then have the browser jump to a new URL. I'm using .one so that the user can only click the image once.

     jQuery('#launch_button').one('click', function() {
      jQuery("#launch_button").attr("src", "images/button_launch2_grey.png");
      window.location.href = 'test.html';
     });

If I comment out the window.location.href the image changes properly. If I do the opposite and comment out the attr change the window.location.href works but the image does not change first. How do I get the first line (attr change) to finish/work before doing the window.location.href?

Upvotes: 2

Views: 750

Answers (1)

Matt
Matt

Reputation: 75317

When you're running window.location.href your changing the page the user is viewing.

Changes you make to the DOM will only persist for the current page; as soon as the user navigates away, the changes are lost.

The redirection to test.html should be near instantaneous. The image must first load before it is rendered. You should include the image in the DOM in a hidden <img /> tag to ensure it is loaded before you show it (or preload it by constructing a new Image() and setting it's src to the image in JavaScript); but even then you're only going to see it for a split second.

Upvotes: 1

Related Questions