Previous Image showing when setting new image

Hi everyone,

I have an image holder that will be set to different images based on the current page.

 if (currentPageName === "Page A") {
        $w(loadingScreenName).src = "url to image 1";
    }
 else if (currentPageName === "Page B") {
        $w(loadingScreenName).src = "url to image 2";
    }

The problem I’m having now is that let’s say I’m at Page A, then image 1 is showing. When I navigate to Page B, image 1 will show for a while, before it is changed to image 2. The reverse is true as well: When I navigate to Page A from Page B, image 2 will show for a while before it is swapped to image 1.

Is there a way I can change the image from image 1 to image 2 without having the previous image shown?

What is it that you are trying to do? If you want a different image for each page, why not just put that image on the page?

Where do you have the code? Where do you call it?

I’m doing a preloader screen, and different pages have different loading screen. Some pages have the same loading screens.

I call the code inside the onready function.

So then why do you have an if statement. Just call the appropriate preloader from each page.

huh? because different page shows a different image.

“J ust call the appropriate preloader from each page.” meaning?

In the page’s onReady(), add the line:

$w(loadingScreenName).src = "url to image 1";

You don’t need an if statement, since the page itself knows what page it is.

I think I’m beginning to understand that I don’t understand what you’re doing. Perhaps post the URL and explain how to see the problem.

1 Like

Oh it’s in the masterpage.js, that’s why.

Any reason why when changing the image from one source to another it shows the previous source temporarily?

The way javascript works.
When you press the page → page is loaded → $w.onReady starts → images changes.
So when the page is already loaded then the image changes.
Thats why you have a small amount of time the previous image is still loaded.

@volkaertskristof is there a way I can change the image before the page is loaded then?

@joelchiok
When adding a loadscreen on evry page with their specific image then you don’t have the problem.
and you don’t have to use any code to change the image.

@volkaertskristof well that would mean I have to add an image for every single page. Hmm…

@joelchiok
Did you add the $w(“#youriamge”).src = “your url” in the page code or site code?

I tried it and my image changes before its loaded. (when it the page code)
Also, changing an image for evry page isn’t that hard, it takes more time to change the image by code for evry page.

@volkaertskristof " in the page code or site code" I added mine into masterPage.js.

WAIT. What is a page code and what is a site code?

@joelchiok
masterPage.js is the code that runs on all pages,
your page code is the code specific for your page.
when you got to home page you will probably see another tab with home
This is where you can give yor code specific for that page.

@volkaertskristof so masterPage.js is a site code?

Yea masterPage.js is te site code

i tried to add it into the page code but still, same issue.

btw my image is set to “show on all pages” and that’s the image I’ve been changing the source of.