sometimes do not appear images of some segments

[MaliugaSergiy]

when I reload page, sometimes some of segments doesn't have an image. it happens randomly - can render all images, can also not

what could be the reason for this

[MaliugaSergiy]

bad result:

good result:

[zarocknz]

Hi. I'm guessing the reason is the images are being drawn before they have actually loaded in to memory. Using the dev tools in chrome I added some network lag and can replicate the issue.

Let me dig in to the code and have an experiment and I will get back to you.

[MaliugaSergiy]

@zarocknz Thanks a lot for quick answering!

first of all, I want apologize for my English. For me is a bit difficult to express thoughts...

I have found one solution to solve this problem. Mayby not good, but as i see it works there is my code:

// I use EX6 imports in modules
import imgSrc_1 from '../assets/images/img_1.png';
import imgSrc_2 from '../assets/images/img_2.png';
import imgSrc_3 from '../assets/images/img_3.png';
import imgSrc_4 from '../assets/images/img_4.png';
import imgSrc_5 from '../assets/images/img_5.png';
import imgSrc_6 from '../assets/images/img_6.png';
import imgSrc_7 from '../assets/images/img_7.png';
import imgSrc_8 from '../assets/images/img_8.png';

const imagePathes = [imgSrc_1,imgSrc_2, imgSrc_3, imgSrc_4, imgSrc_5, imgSrc_6, imgSrc_7, imgSrc_8]
let imageCollection = [];
let imgLoadPromises = [];

    for(let i = 0; i <= 7; i++) {

        imgLoadPromises.push(
            new Promise( (resolve, reject) => {
                imageCollection[i] = new Image();
                imageCollection[i].src = imagePathes[i];
                imageCollection[i].addEventListener('load', function() {
                    resolve(true);
                });
            })
        )
    }

    Promise.all(imgLoadPromises).then( result => {
        runnn();  // runnn() - runs function that invoke your library afler all images are loaded
    });

[MaliugaSergiy]

@zarocknz maybe it would be usefull to add such checking in your code?

[zarocknz]

Interesting. I am not too familiar with JS promises so will need time to understand it. I mostly do back-end development these days so have not kept up with all the new JS goodness.

I was experimenting just now in Winwheel.js and think I might have found a solution. Can you please try changing line 2273 in the winwheelLoadedImage() function from...

if ((winwheelToDrawDuringAnimation.segments[i].imgData != null) && (winwheelToDrawDuringAnimation.segments[i].imgData.height)) {

to

if ((winwheelToDrawDuringAnimation.segments[i].imgData != null) && (winwheelToDrawDuringAnimation.segments[i].imgData.complete)) {

This updates the code to check imgData.complete rather than imgData.height.

Please let me know if this works for you, if so I will check in the change and release a new version of the Winwheel.js including a minified file.

Thanks.

[MaliugaSergiy]

Interesting. I am not too familiar with JS promises so will need time to understand it. I mostly do back-end development these days so have not kept up with all the new JS goodness.

I was experimenting just now in Winwheel.js and think I might have found a solution. Can you please try changing line 2273 in the winwheelLoadedImage() function from...

if ((winwheelToDrawDuringAnimation.segments[i].imgData != null) && (winwheelToDrawDuringAnimation.segments[i].imgData.height)) {

to

if ((winwheelToDrawDuringAnimation.segments[i].imgData != null) && (winwheelToDrawDuringAnimation.segments[i].imgData.complete)) {

This updates the code to check imgData.complete rather than imgData.height.

Please let me know if this works for you, if so I will check in the change and release a new version of the Winwheel.js including a minified file.

Thanks.

@zarocknz Hurrah!!! I've conmmented my code with Promices and have changed this line. It works!

THANKS!

[CodeByZach]

Can we make this a pull request @zarocknz ?