My variation changes are not showing up in preview

[#1]

Hi,

I recently changed the background image and the headline of the banner of the site I want to AB test. When I click on preview or interactive mode, the old design appears and the changes won't show. Why is this?

[#2]

Great question. I actually looked at your experiment and it looks like you are running into a timing issue where the Optimizely code is executing before your banner image actually exists in the DOM. Essentially this means that your Optimizely code can't be applied because the image can't be found when it runs.

There are a couple ways around this. Are you familiar with setting intervals? Essentially this would allow you to wrap your variation code in a function that waits for the banner image to exist, thus avoiding the problem outlined above.

If you'd like some help with this code, just let us know and we can post it here.

Here's a KB article that provides a bit more detail: https://help.optimizely.com/hc/en-us/articles/200457495

[#3]

Here is the set interval function that should help with this timing issue:

window.myInterval = setInterval(function() {
  if ($('[ELEMENT_YOU_ARE_CHECKING_TO_EXIST]').length > 0) {
          //VARIATION CODE EXECUTING CHANGES
    clearInterval(window.myInterval);
  }
}, 50);

[#4]

Thank you for your response, unfortunately I don't really know what to do with the code. I tried some different variations with the set interval function ,but it still doesn't work

[#5 · Accepted solution]

Hi @YulianSha - in your case, you want the code to wait unilt your banner image is present, so if you use the following code this should do the trick (feel free to replace the code in the "Edit Code" section of your variation with this)

window.myInterval = setInterval(function() {
  if ($('.banner').length > 0) {
$(".banner").css({"background-image":"url(//cdn.optimizely.com/img/2753040555/f14f7959a85746a1b56b3347690200e2.jpg)"});
$(".ng-binding > .ng-binding").replaceWith("<span class=\"ng-binding\"> Anytime and Anywhere.</span>");
    clearInterval(window.myInterval);
  }
}, 50);

In the code above, this line is waiting for the image to exist. It checks for this image every 50 milliseconds

$('.banner').length > 0

 Once the statement above evaluates to true, meaning the banner image exists, the code is executed and the banner image is swapped out ot the new one. 

Can you try the above and let us know if this works for you?

[#6]

Thank you, this was very helpfull! It works now

[#7]

I'm trying to change an image on a page of my site.

1st i was replacing it, but the original image is turned 3 degrees... (with css code i can't turn it back), so i removed the image, added a new one to show on the same place. 

unfortunately, when i preview my variation, i see the old image on the same place, and the new image on that same place...  Any idea how i can solve this?

Thanks,

Tom

[#8]

Tom,
Sounds like a timing issue, maybe.

Can you share the URL of the page that should have the altered image?

[#9]

Yea, @nap0leon is most likely correct in this case. My suspicion is that you are removing the image in the editor, but when the code runs live Optimizely is unable to remove the image because it doesn't exist until after the variation code runs. We have a support article that highlights some timing issues here. 

The good news is that there are ways around this, like setting an interval to wait for the image to exist, you just have to tweak the variation code a little. 

Let us know if you are still seeing issues, or if you have any questions. If you can post the URL where the double image is showing up, that would be helpful too!