WebSite X5Help Center

 
Guillermo A.
Guillermo A.
User

Image jumps when loading website page  en

Author: Guillermo A.
Visited 1476, Followers 1, Shared 0  

Hello, 
I have just uploaded my website (guillermoalgora.com) and I notice a 'images jumping' effect on some of the pages. Please, go to Main page (https://guillermoalgora.com/index.php) and you will see how the coloured image jumps before setting in its final position. If you go to Showreel (https://guillermoalgora.com/showreel---main.html) a similar effect occurs. The background image (in yellow) gets cut off and you can see a hard line before it settles in its final position.

Is there a way that this can get mitigated? I imagine it's because the computer loads the image and then repositions it, but it makes the site to look really unprofessional. Because these images are set using either 'Row Format' or 'Page Properties/Graphic/Page Background/Enable Custom Settings' there is no way I could set a fade in effect (0 to 1) which may help to not see the picture at the beginning until it's settles in. 

Please, any help is appreciated on this. 
Thank you.

Posted on the
18 ANSWERS - 2 USEFUL - 1 CORRECT
John S.
John S.
User

Try making the content of the page less - so there is no scrolling needed.

How is your layout for the row-format?

Read more
Posted on the from John S.
Guillermo A.
Guillermo A.
User
Author

I have realized it only happens with Row Format and not with 'Page Properties/Graphic/Page Background/Enable Custom Settings. 
Unfortunately reducing the content of the page is not an option.


My layout is as follows: 

Read more
Posted on the from Guillermo A.
John S.
John S.
User

OK - so using background image for the page is not an option.

As the background is white also for the image could you not try to "unlock" the last row - or maybe the last 2 or 3  rows?

Read more
Posted on the from John S.
Guillermo A.
Guillermo A.
User
Author

Unfortunately it doesn't help. Using background image for the page (Page Properties/Graphic/Page Background/Enable Custom Settings) is definitely an option but I whish I could make use of 'Row Format' without it causing a lot of issues when loading. Basically makes this feature almost unusable. I have updated the site, if you go to R&D / BLOG (https://guillermoalgora.com/blog-r-d---main.html) I have used 'Row Format' and there is again more jumping of the format... sigh 
Thank you so much for your help. 

Read more
Posted on the from Guillermo A.
Guillermo A.
Guillermo A.
User
Author

Is there a chance to perhaps do a fade-in of some short in the ´Row Format´ to disguise the bug in the loading process? Maybe if I use a fade-in GIF as image could work, but seems an overkill to me to have to make a GIF for every new top row in that page. 
Could that be coded somehow?

Read more
Posted on the from Guillermo A.
Guillermo A.
Guillermo A.
User
Author

I think this feature needs a proper fix...

Read more
Posted on the from Guillermo A.
Esahc ..
Esahc ..
Moderator

Guillermo, can you attach the background rainbow image to a post?

I suspect the issue would be mitigated if it could be resampled down in size and may also be better displayed using a different placement (I suspect you have selected fit to window)

Read more
Posted on the from Esahc ..
Guillermo A.
Guillermo A.
User
Author

Hello Esahc,

Attached the rainbow image. Yes, is using ´Fit to Window´ I suspect it could be mitigated like that, but what about BLOG / R&D what is jumping is the ´Row Format´ which is a built-in Gradient. 

Read more
Posted on the from Guillermo A.
Esahc ..
Esahc ..
Moderator

Guillermo on my pc (firefox) the background image on BLOG / R&D does not jump (even with ctrl+F5 to clear cache and reload) although I note the text (?) object changes size (although I do not find this distracting at all, the effect is rather good). I will look at your rainbow on my PC tomorrow and try various scenarios.

Read more
Posted on the from Esahc ..
Guillermo A.
Guillermo A.
User
Author

The background image does not jump because uses 'Page Properties/Graphic/Page Background/Enable Custom Settings'. I was referring to the text object 'Row Format' that you have noticed. Although in this particular case it may not be too ofensive, I think we can agree that this is not the desirable outcome or what the user is looking for. Although I love an appreciate all help, don't take me wrong, I wonder why is so hard to acknowledge when a feature does not work as it should. In the case of images, I can buy that the issue may be related to image size or other under the hood issues, but in this case (issue at BLOG / R&D) we are talking about a built-in Gradient.
So far, of all the 'Row Format' I have been trying I always get this type of 'jumping' size change, whether is with an external image or a built-in function). I appreciate immensely your help to find a workaround but le'ts call a spade a spade.

Read more
Posted on the from Guillermo A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Guillermo A.
Is there a chance to perhaps do a fade-in of some short in the ´Row Format´ to disguise the bug in the loading process? ... ... ... ... 

(It > De) ops! (It > En) ... ... yes, it would be possible to obtain it with my invention with EXTRA code ...
...
if you are familiar with the Expert section, and if you are interested in a delayed fade effect for the background of the lines (FadeIn), ... you notify me, ... so then I will post the code ...

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Guillermo A.
Guillermo A.
User
Author

Hello KolAsim, 
I would love to implement that. Although I am not familiar at all with the 'Expert' tab, I am thankfully familiar with programming so I guess should be able to pull it off eventually with some help. I'll be waiting for the code and hopefully some instructions. Thank you! 

Read more
Posted on the from Guillermo A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Guillermo A.
... ...  ... I guess should be able to pull it off eventually with some help. I'll be waiting for the code and hopefully some instructions. Thank you! 

... OK ... the code is to be copied and pasted in this section:
>> Step 3 - Map> Page Properties > Expert section | ▪ Custom Code: 3^ option > Before closing the HEAD tag...
... you need to adjust the delay seconds, now set to 3 (three) seconds:
ritardoK = 3;
... code:

<!-- FadeIn sfondo righe by KolAsim -->
<style>
div[id^='imPageRowGraphics_'] {display:none }
</style>
<script> 
$( document ).ready(function() { //K>;
ritardoK = 3; // nr. di secondi di ritardo, da valutare;<==K==
setTimeout(function(){ //K1>;
$("div[id^='imPageRowGraphics_'] ").fadeIn(1000);
}, ritardoK * 1000); //K1<<;
});//K<<;
</script>
<!-- end FadeIn -->

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Guillermo A.
Guillermo A.
User
Author

Thank you so much! the delay is working perfectly and getting rid of the undesired size 'jump'.

Read more
Posted on the from Guillermo A.
Guillermo A.
Guillermo A.
User
Author

I think this solves my issue so far... However, it may not solve other user issues with it. I think Incomedia should take a proper look at this issue and I will submit  a bug report, but if a member from the development team can  be pinged to this conversation that would be great. Moreover, adding this delay feature to the software would be a great addition to be honest.

Read more
Posted on the from Guillermo A.
Guillermo A.
Guillermo A.
User
Author

Thank you Esahc and KolAsim for your assistance.

Read more
Posted on the from Guillermo A.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... thanks to you for testing and feedback ...
... the delay of half a second is perhaps a little short ...ciao...wink...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪