Bug on specific project page

[craigfeldspar]

hi, I've had a bug for a long time on this one project page, the images don't all load in the carousel or in the footer afterwards. I've tried making a new page, changing the url, following the steps to follow before posting here, but it always comes back.
I'd be grateful to understand what's going on : https://www.benoitlefeuvre.com/iridescence/

Thanks in advance,
Benoît

[arminunruh]

wow nice cursors!

do you have a screenshot? which slide is it not loading for?
for me everything is loading

[craigfeldspar]

thank you!

it happens when you come from home, it's certain images in the carousel and footer that take a long time to load and asynchronously, it's the only page that does this.

[arminunruh]

when i navigate around on your site sometimes i get this error

do you think it has to do with your javascript maybe?

[arminunruh]

i think your js maybe should be like this instead:

let cursorX = 0;
let cursorY = 0;

// Capture et stocke la position actuelle du curseur
document.addEventListener("mousemove", (e) => {
	cursorX = e.clientX;
	cursorY = e.clientY;
	updateCursorPosition();
});

// Fonction pour mettre à jour la position des éléments
function updateCursorPosition() {
	const followTexts = document.querySelectorAll(".numbers");
	followTexts.forEach((followText) => {
		followText.style.left = cursorX + "px";
		followText.style.top = cursorY + "px";
	});
}

window.laytheme.on("newpageshown", function(){
	// Événement personnalisé pour le changement de page du carousel
	const carousel = document.querySelector('.carousel');
	if(carousel) {
		carousel.addEventListener('slide.bs.carousel', () => {
			setTimeout(updateCursorPosition, 0);  // Met à jour la position après le changement de page
		});
	}
});

Does that help?
This checks for the existence of a carousel and only runs the code once the layout of a page has shown up using
window.laytheme.on("newpageshown", function(){

https://laytheme.com/documentation/custom-javascript.html#newpage-events

[arminunruh]

another thing you could try is go to settings → permalinks

and click "save" there and see if there are any warnings shown at the bottom
and if you have an image plugin you could disable it

and you could go to lay options → and in there disable lazyloading

you could also try and disable lazyloading in lay options → carousel addon
does that help?

[craigfeldspar]

I changed web hosting (which was already planned) and the bug doesn't seem to appear anymore.

thank you for updating the js code, but the script doesn't work between pages on carousel, the cursor resets to the top left, do you have any idea how to do this? if you prefer, we can close this topic and open another.

Thanks in advance!

[arminunruh]

mh i think in your javascript you can hide the cursor on newpageshown and only show it when someone moved the mouse

[craigfeldspar]

I figured out how to do it: https://benoitlefeuvre.com/

<script>
let cursorX = 0;
let cursorY = 0;
let cursorMoved = false; 

document.addEventListener("mousemove", (e) => {
    if (!cursorMoved) {
        showCursor(); 
        cursorMoved = true;
    }
    
    cursorX = e.clientX;
    cursorY = e.clientY;
    updateCursorPosition();
});

function updateCursorPosition() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.left = cursorX + "px";
        followText.style.top = cursorY + "px";
    });
}

function showCursor() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.display = "block"; 
    });
}

function hideCursor() {
    const followTexts = document.querySelectorAll(".numbers");
    followTexts.forEach((followText) => {
        followText.style.display = "none"; 
    });
}

window.laytheme.on("newpageshown", function() {
    cursorMoved = false; 
    hideCursor();
});
</script>

[arminunruh]

wow great!