3

I currently have a div that's used to display and image via CSS.

For example:

HTML

<div id="myDiv" class="play"></div>

CSS

.play{background: url('../img/playIcon_black.png') no-repeat;}

This image appears as it should.

What I'm attempted to do is to change the image by changing the class (via JavaScript).

Example:

CSS

.pause{background: url('../img/pauseIcon_black.png') no-repeat;}

JavaScript

function myFunction() {
    myDiv.className = "pause";
}

When I call myFunction() everything seems to work correctly with one exception. Occasionally the image does not update in the browser.

A few things to note:

  • I'm certain the function is being called correctly. If I put a console.log() statement within the function, it prints when it should. Additionally, if I inspect the element within the browser, the class is in fact changed to .pause
  • The image changes from the "play icon" to blank once the function is called, BUT upon hovering over the div the images then appears permanently.
  • This only seems to happen once the page is initially loaded. Meaning, I can only recreate the issue once upon refresh, then everything works correctly after that.
  • I have attempted to clear my cache but nothing seems to have changed.
  • (I'm not sure how relevant this is) I'm calling myFunction() via onended attribute of an audio tag.

For example:

<audio onended="myFunction()"></audio>

But I'm not certain if this would affect anything because the function appears to be called correctly.

Any ideas of why this might be happening?

Paul Warnick
  • 903
  • 2
  • 13
  • 26
  • 1
    You've got a case typo `onended="myfunction()` instead of `onended="myFunction()` – Soviut Oct 13 '16 at 16:43
  • It's probably a combination of the typo and possibly waiting for the image to load. [I've recreated the essentials here](https://jsfiddle.net/sx4w2fyz/) and it works fine. – Mike Cluck Oct 13 '16 at 16:44
  • @Soviut My bad, I've edited the question – Paul Warnick Oct 13 '16 at 16:44
  • 3
    Do note that setting `className` wipes out any other classes which may be on the `div`. That appears to be what you want -- just a heads up for future readers. – Heretic Monkey Oct 13 '16 at 16:51

4 Answers4

2

So the issue is that when you change the class, the browser has to fetch the new image, which takes time. One way to fix the issue is by using sprites, where both images are actually in one image and you only show a piece of that image at a time.

Another solution is to preload the image and then apply the preloaded image source to your new element like this:

var image = newImage();
image.src = '../img/pauseIcon_black.png';

function myFunction() {
    var cssBackground = 'url(' + image.src + ') no-repeat';
    myDiv.style.background = cssBackground;
    // Optionally with jQuery instead:
    // $('#myElementID').css('background', cssBackground);
}

Note that if you call myFunction before the image loads you'll encounter the same error. The difference is that this will load the image when the page is loaded (or more properly, when this JS executes and myFunction is assigned) rather than when myFunction is called. To ensure the image is loaded you can use the onLoad event handler for the image object. For more details on preloading images check out this answer: preload image then change background javascript

Community
  • 1
  • 1
winhowes
  • 7,845
  • 5
  • 28
  • 39
0

You need to get the element id 

function myfunction(){
  var myDivElem = document.getElementById('myDiv');
  myDivElem.className = 'pause'; 
}
Rayner Villalba
  • 71
  • 1
  • No they don't, though I hate this "feature", `window.myDiv` will be available automatically. [See this for explanation](http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) – Rob M. Oct 13 '16 at 16:45
0

You can use document.getElementById("myDiv").className="";in your function
OK if you don't want use first solution you can use second one:
You can add a class to element using
document.getElementById("myDiv").className +=" n";
Then add a class named .play.n to your css file after class named.play
Then add your image address.

Arash Younesi
  • 1,671
  • 1
  • 14
  • 23
  • FYI, there is no difference between your answer and `myDiv.className = "";` [reference](http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables) – Rob M. Oct 13 '16 at 16:49
0

If you want to manipulate the div with id "myDiv". Use it as

document.getElementById('myDiv').class

Sample codesnippet: example snippet

Abel
  • 2,371
  • 3
  • 15
  • 29