this.render() not showing gallery unless i resize the window

[mmezian]

First, I would like to congratulate you on the quality of this gallery and thank you for sharing with the community.

I just installed the component, it works but... the gallery doesn't render unless I resize the screen.

I pinpointed the problem to the this part :

// twice, single leads to different strange browser behaviour this.render(); this.render();

I even tried using setTimeout with 5 seconds timeout, sometimes it works, sometimes it doesn't.

Again, when I change resize the window it works just fine.

Do you have any idea how to fix this ?

[mmezian]

I would like to add that I use angular 8, and I send the Json URL through the component input [metadataUri]

[mmezian]

The images are not showing because they say src(unknown), when I resize the window they show up with proper src

[BenjaminBrandmeier]

Which browsers does this affect?

[mmezian]

I had tested on Chrome for now (Version 75.0.3770.100 64-bit)

[mmezian]

Just tested on Firefox, it's the same problem

[mmezian]

There's something else : the gallery needs to be in my visible part of the screen, before I resize, for it to be visible.

Meaning : If I'm not looking at the gallery, and I resize, nothing happens.

I need to see the gallery on my visible screen, then resize, and then it appears.

I'm using angular 8

[mmezian]

Any help with this? If I can't get it working, I'll have to use something else...

[GBra-4-669]

Hello, it might be an issue with scrollIntoView(), could you please test this: File: gallery.component.ts Replace the method on line 238 to just return true like this:

private isScrolledIntoView(element: any): boolean {
    return true; 
}

Hope that helps!

[mmezian]

Hi,

Thanks for your help. Unfortunately, I did that and the problem is still there. I have to resize the window while seeing the pictures for it to show the thumbnails.

here is how it looks like before I resize :
https://imgur.com/JCHnDN0

here is the code inspection of the thumbnail image while it is not showing: https://imgur.com/uGYMmUd

Here it is working after i resize window while seeing it :
https://imgur.com/QNJyzfa

[GBra-4-669]

I am sorry but your screenshots don't really help since also in the demo if you inspect you will see that most of the src are unknown until you scroll into view them. That is why I am thinking that your bug is related to it. Could you share your code? Sorry, but I cannot reproduce this issue by cloning the repo.

[GBra-4-669]

Hi, testing on stackblitz it's very painful and I see that you have a custom structure right there, to identify a bug it's better to follow the original file structure. Forked the original repo, made two versions, master is basically the same. I would suggest you to start from the branch simplified, I also pushed some dummy images just for testing. Could you either clone or just implement my changes on your solution and do some testing?

[mmezian]

OK Guys I found the problem. The gallery loads FINE when it is above the fold (visible part of the screen).

If I have to scroll way down to see it, it will NEVER load if its not visible.

Anyone knows how to fix this ?

[mmezian]

Anyone else could test the script bellow the fold (bellow the visible part of the screen) and see if it loads ?

[jschuldes]

I´ve had the same problem. The thumbnails in the invisible part of the page doesn´t get rendered after they got scrolled into view. I started a new small project with angular 8.2 and material. In my case the problem was that I didn´t receive a scroll event and therefore the code for loading the images wasn´t called. Following line added in ngOnInit() resolved my problem:

window.addEventListener('scroll', this.triggerCycle.bind(this), true);

In ngOnDestroy I just remove the listener.

[BenjaminBrandmeier]

This was fixed within the latest version. Thanks a lot for all the suggestions guys to help out other users!