Cocoen works fine offline, but needs F5 refresh to load left image when uploaded online

[neilwhitedesign]

Hello

I'm wanting to use multiple instances of Cocoen on my website as it's a great way to illustrate my skills in Digital Imaging and Photo Restoration.

The slider was working fine while building and testing the site offline, but for the left image to appear and the slider to move when online, an F5 refresh is required:

Has anyone experienced this same issue? If so, can you offer advice on how to overcome this?

Any help would be much appreciated.

Thanks

[allanmferreira]

I have the same issue.

[gingerchew]

Do you have a url or something where it is up? I can try and help

[allanmferreira]

Do you have a url or something where it is up? I can try and help

Here https://evandrorocha.ulisite.com/test

[neilwhitedesign]

Hello Allan

I never received a response from the creator of Cocoen, so had to research a solution for myself.

The one I found that worked was to add a script to reload the page after it had initially loaded:

I hope this helps

Regards

Neil White

[cid:a426f1cd-b5d2-4a19-9e4e-b4b2dcbffa31]http://www.neilwhitedesign.co.uk Automotive Product Graphic Website Digital Imaging

---

From: Allan Megiani Ferreira notifications@github.com Sent: 09 February 2021 18:06 To: koenoe/cocoen cocoen@noreply.github.com Cc: neilwhitedesign neilwhite_design@hotmail.com; Author author@noreply.github.com Subject: Re: [koenoe/cocoen] Cocoen works fine offline, but needs F5 refresh to load left image when uploaded online (#53)

I have the same issue.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/koenoe/cocoen/issues/53#issuecomment-776131548, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASDQC5DBKUT3U4IJGE54KGDS6F2RTANCNFSM4VRY3VUQ.

[gingerchew]

@allanmferreira That is weird. I'm looking through the minified JS on your site, and it looks like you don't have the Cocoen init code wrapped in a event listener for when the DOM is ready.

I deleted the Cocoen generated code from the inspector, and created a new Cocoen in the console and it works fine. I think the Cocoen code is running before the browser is properly sizing the image, hence the need to hard-refresh.

Try replacing your init code with this:

// DOMContentLoaded is close to $().ready() in jQuery
document.addEventListener('DOMContentLoaded', function(event) {
    const beforeAfterSlider = new Cocoen(document.querySelector('.cocoen'));
}, { once: true });

// OR

window.addEventListener('load', function(event) {
    const beforeAfterSlider = new Cocoen(document.querySelector('.cocoen'));
});

Lemme know if that fixes things.

[allanmferreira]

@allanmferreira That is weird. I'm looking through the minified JS on your site, and it looks like you don't have the Cocoen init code wrapped in a event listener for when the DOM is ready.

I deleted the Cocoen generated code from the inspector, and created a new Cocoen in the console and it works fine. I think the Cocoen code is running before the browser is properly sizing the image, hence the need to hard-refresh.

Try replacing your init code with this:

// DOMContentLoaded is close to $().ready() in jQuery
document.addEventListener('DOMContentLoaded', function(event) {
  const beforeAfterSlider = new Cocoen(document.querySelector('.cocoen'));
}, { once: true });

// OR

window.addEventListener('load', function(event) {
  const beforeAfterSlider = new Cocoen(document.querySelector('.cocoen'));
});

Lemme know if that fixes things.

Works for me, I moved the cocoen to inside a load function. @neilwhitedesign maybe you can try to do this too