- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
My variation changes are not showing up in preview

My variation changes are not showing up in preview
[ Edited ]- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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?
Solved! Go to Solution.
Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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
Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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);
Customer Success
Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report

Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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?
Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
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
Re: My variation changes are not showing up in preview
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
Sounds like a timing issue, maybe.
Can you share the URL of the page that should have the altered image?
Re: My variation changes are not showing up in preview
[ Edited ]- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
Yea, @JDahlinANF 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!