Comments (15)
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.
from angular2-image-gallery.
I would like to add that I use angular 8, and I send the Json URL through the component input [metadataUri]
from angular2-image-gallery.
The images are not showing because they say src(unknown), when I resize the window they show up with proper src
from angular2-image-gallery.
Which browsers does this affect?
from angular2-image-gallery.
I had tested on Chrome for now (Version 75.0.3770.100 64-bit)
from angular2-image-gallery.
Just tested on Firefox, it's the same problem
from angular2-image-gallery.
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
from angular2-image-gallery.
Any help with this? If I can't get it working, I'll have to use something else...
from angular2-image-gallery.
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!
from angular2-image-gallery.
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
from angular2-image-gallery.
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.
from angular2-image-gallery.
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?
from angular2-image-gallery.
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 ?
from angular2-image-gallery.
Anyone else could test the script bellow the fold (bellow the visible part of the screen) and see if it loads ?
from angular2-image-gallery.
This was fixed within the latest version. Thanks a lot for all the suggestions guys to help out other users!
from angular2-image-gallery.
Related Issues (20)
- Error on :Run convert script" - TypeError: invalid options argument HOT 5
- Real intended dedicated "Viewer" component HOT 4
- Unexpected value 'Angular2ImageGalleryModule' imported by the module 'AppModule'. Please add a @NgModule annotation. HOT 3
- import error HOT 1
- Arrows are in center of the image HOT 1
- data.js not found when the option [galleryName]="'yourGalleryName'" is added to the html HOT 2
- Angular 7 Compatibility HOT 5
- Can't pinch-to-zoom on ImageViewer (mobile) HOT 2
- maxRowsPerPage does not jump to top on page switch HOT 1
- How to integrate gallery in template? HOT 1
- Issue lazy loading module HOT 4
- Cannot find module 'gm' HOT 1
- Feature: overlay buttons with click events as plugins HOT 1
- error when running this:node node_modules/angular2-image-gallery/convert.js HOT 3
- Support for angular 9 HOT 3
- 'gallery' is not a known element HOT 2
- fix some litle boring issues HOT 3
- angular 10 HOT 2
- upgrade to angular 10 error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-image-gallery.