trademe / ng-defer-load Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
If there are images that can be seen before any scrolling happens it seems to break the website with ExpressionChangedAfterItHasBeenCheckedError
If ngFor
list has animation like :enter
, deferLoad
doesn't seem to work properly - images are loaded all at once.
Hello,
We are facing some build issues, any help would be helpful.
ionic info
`Ionic:
Ionic CLI : 6.10.1 (/Users/joaolourenco/.nvm/versions/node/v12.16.2/lib/node_modules/@ionic/cli)
Ionic Framework : ionic-angular 3.9.9
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 23 other plugins)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.16.2 (/Users/joaolourenco/.nvm/versions/node/v12.16.2/bin/node)
npm : 6.14.4
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c
`
angular packages
with - "typescript": "2.6.2"
I am using version 2 for an angular 6 project, as the latest version show dependency error when installing. The directive works when following the instruction in read me.
However, expression change after it was checked error occurs in Safari 11 and IE 11 but not in Chrome or Firefox. I noticed a similar ticket was posted here and closed without any comments.
Being a new developer, I wonder why the expression change after it was checked error only happens in Safari and IE. It would appreciated if someone could advice on this issue.
I did not try with the app.module, but I followed the example link pretty closely and this is the only difference I could find.
When deferLoad is used in a child component, it will load all images that are presently in the initial viewport but fail to load any images on new images that come to the viewport thereafter.
helps to avoid those warnings
$ npm i @trademe/ng-defer-load
npm WARN @trademe/[email protected] requires a peer of @angular/common@^5.2.5 but none is installed. You must install peer dependencies yourself.
npm WARN @trademe/[email protected] requires a peer of @angular/core@^5.2.5 but none is installed. You must install peer dependencies yourself.
npm WARN @trademe/[email protected] requires a peer of @angular/platform-browser@^5.2.5 but none is installed. You must install peer dependencies yourself.
npm WARN @trademe/[email protected] requires a peer of rxjs@^5.5.6 but none is installed. You must install peer dependencies yourself.
Firefox <= 52 loads all content on current tab and all other tabs in Angular 8 and ng-defer-load v8.2.1. What browsers are supported?
On iPhone the images don't load until the scroll stops, is there a way to set it up so that the images load as they come into view even while stills scrolling ?
Can I use this library to load images from assets/
directory?
I implemented the package exactly as described in this example: https://www.npmjs.com/package/@trademe/ng-defer-load
It works fine when I scroll over my website but it looks like the google bot does not see the images.
Is this a known issue? Or am I doing something wrong?
Would be amazing to have also an event when the elements scoll out of the view.
Hi @VamsiVempati,
First of all, cool library, really cool library! I'm trying to lazy load my images in order to improve the accessibility of my website and I landed on your awesome work, thx a lot
I implemented your directive and it turned out that it was ignored by the lighthouse test. I digged a bit and it turned out that the images of my website (https://fluster.io) were loaded straight at the begin aka not lazy loaded because the images were recognized as being already displayed where actually the scroll was still at the top
In the directive https://github.com/TradeMe/ng-defer-load/blob/master/src/defer-load.directive.ts method isVisible ()
, the element y position is resolved doing
let elementOffset = this._element.nativeElement.offsetTop;
which in my case always returned a small value, way smaller than the scrollPosition
which seemed correct. After a couple of try I replaced the above code with the following one and it solved my problem
let elementOffset = this._element.nativeElement.getBoundingClientRect().top + window.scrollY;
doing so, my offset was correctly calculated.
Don't know if there is something really special in my website or if you think that it could be an improvement for the directive? If you think that isn't a bad idea, I could of course send a PR
Best regards
David
When compiling Angular project with latest version of Angular CLI it throws below warning:
mytest.module.ts depends on @trademe/ng-defer-load. CommonJS or AMD dependencies can cause optimization bailouts.
Google advises against using CommonJS modules because it can impact the tree-shaking of application as explained here https://web.dev/commonjs-larger-bundles/
I would therefore request you to please release this plugin as es2015 module.
Thank you
Google Developer docs available at https://developers.google.com/web/updates/2016/04/intersectionobserver
suggests:
If you need to observe multiple elements, it is both possible and advised to observe multiple elements using the same IntersectionObserver instance by calling observe() multiple times
It seems that this directive creates new IntersectionObserver
for each element, so if there are let;s say 20 images we will end up with 20 IntersectionObservers
. What if we could re-use the same IntersectionObserver?
NodeJS Version: 10.9.0
Typescript Version: 3.1.6
Angular Version: 7.0.3
@trademe/ng-defer-load: 2.0.0
@angular/cli version: 7.0.5
OS: Windows 10
No warnings should be shown
running npm install
throws the following warning:
npm WARN @trademe/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @trademe/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @trademe/[email protected] requires a peer of @angular/platform-browser@^6.0.0 but none is installed. You must install peer dependencies yourself.
Need to add support for Angular7, there is no big difference between v6 and v7, and package already have support for v6.
We should make sure to update codelyzer package to 4.5.0 to work with Angular 7 too.
Hi there,
I tested your package and it worked well untill I opened the web application on a mobile phone. Then it did no longer load the images...
I checked your demo on my phone and there it works. Any ideas how come? :)
I didn't set any options, just used it as described:
(deferLoad)="showMyElement=true">
<my-element
*ngIf=showMyElement>
...
</my-element>
In the meantime I wrote my own Intersection Observer, I was just curious how come it does not work out of the box :)
Lately I've upgraded my project to latest angular 8.2.14. Despite of warning during npm install
, defer-load is working well.
But, when I enable IVY engine it fails during loading application
Uncaught ReferenceError: Directive is not defined
at vendor-es2015.js:117166
at Object../node_modules/@trademe/ng-defer-load/__ivy_ngcc__/dist/defer-load.directive.js (vendor-es2015.js:117181)
at __webpack_require__ (runtime-es2015.js:80)
at Object../node_modules/@trademe/ng-defer-load/__ivy_ngcc__/dist/defer-load.module.js (vendor-es2015.js:117201)
at __webpack_require__ (runtime-es2015.js:80)
at Object../node_modules/@trademe/ng-defer-load/__ivy_ngcc__/dist/index.js (vendor-es2015.js:117238)
at __webpack_require__ (runtime-es2015.js:80)
at Module../src/app/app.module.ts (main-es2015.js:603)
at __webpack_require__ (runtime-es2015.js:80)
at Module../src/main.ts (main-es2015.js:2540)
It would be great to make it work with IVY
Thanks for this nice module. I've tried with Angular 7 and it works perfectly fine. Yet, I've just upgraded my Angular app to v8, and found out that the defer load kind of stop working. I'm not sure if this is caused by the lazy loading modules introduced in Angular 8.
Angular: 8.1
ng-defer-load: "^3.0.1"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.