Dealing with Blinking Images

Hi,

Sometimes, when trying to populate dynamic pages, repeaters or standalone images a flicker will occur.
Both while moving from edit to preview mode and even sometimes on live sites.

For example, lets say we wish to change an image by code and then show it, we will need to select a ‘placeholder’ image from the media manager. Then we will write this line of code in the onReady function:

$w.onReady(function () {
	$w('#dog').src = 'https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg';
	$w('#dog').show();
});

And we will get this result:

This happened since we had to choose a placeholder image, so I chose a cat.
You can see that when I click the preview button you can still see the cat for a split second

To overcome this issue, there is no need to change your code, simply upload a blank placeholder image and use it for every image that the code interacts with and viola, no more flicker!

Download placeholder image here Right click and save image as.

Side by side comparison
Placeholder image used on the left, while the cat image it used on the right, note the captions (Cat/no cat) after I click the preview button

Good luck!

2 Likes

Hello @Ido Inbar ,
I have read your answer here… https://www.wix.com/code/home/forum/community-discussion/boolean-in-the-dynamic-page-with-a-text-field

I am trying to do the same thing . Please help me out. This is the screenshot where I have already used some code. Now I don’t understand where to add the code you provided…
I want to show text “Photographer” instead of showing True for the textbox which has id “category1” …
the fieldname is “photographer”…
And I need to do the same for the other texts where “category” is written. Please help me out

Hi Ido Inbar. Any chance you could tell me how to, or point me to where its been shown before, on showing the image in an image box on my input form which a user uploads using the upload button. at the present when the user clicks on the upload button and selects the appropriate image it up-loads nicely, and shows the file name under the upload button as it should.
Everything on my form works perfectly and nothing needs changing, Its just I would like the user to see their uploaded image before they save…
Thanks in Advance
Gary