twokul / ember-lazy-image Goto Github PK

I've got a list of products and when i change a query-param like sort-order form ascending to descending the products change expect the lazy-image-component which displays the image of the product before on that place. What needs to be done to get this to work.

Hi!
When you are planning your next release with commit e90dfe1? Uncomfortable work with Ember 1.13.

Thanks for work!

Using Ember 2.5.0. Could not get this component to work on the initial page load. Worked beautifully on each subsequent page.

In each case, the image spinner would go away and no error was thrown. The src attribute for the image was simply blank.

https://github.com/twokul/ember-lazy-image/blob/master/vendor/lazy-image/lazy-image.css#L35-L57

That hit me hard. Now all my grid classes are fading in and out ;)

Hello, when trying to install via ember install ember-lazy-image or npm install the package.json is still pointing to ~1.2.5 of the ember-in-viewport ... comes down as v0.0.14.

Any chance of fixing that?

It would helpful if you could assign attributes like height, width, or data-* when using this component and have those pass through to the lazy loaded image.

once the images are loaded and user navigates from one route to another, cached images should have src attribute right away (no lazy loading).

localStorage or applicationCache

• https://github.com/dockyard/ember-in-viewport

Beside the fact that it uses es6 extensively it would give us performance by unbinding the event listeners and more options on viewportTolerance/threshold.

I could rename enteredViewport to viewportEntered and replace the mixins.

@poteto what do you think? is ember-in-viewport ready or should we wait for 1.0.0

Hi,
I am getting the following deprecation warning from the component after upgrading to ember 1.13

A property of... was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.

Is this add-on abandoned? I'm seeing a few PRs submitted a while ago and nothing happened. I was about to submit one, but not sure since there's no activity on the repo.

Given...

{{lazy-image url=someUnresolvedPromise.urlAttribute}}

The image never loads, even once the promise resolves, and I get a spinner forever.

I've tried to add alt attributes and it doesn't seem posible, it's something that can be done easily? I could look at the code to make a PR if neccesary.

Thanks!

@twokul has added me as a contributor to the repo, and I have an open PR to update some deps and fix tests. Thanks @twokul !

I haven't gotten much feedback on my PR or seen much other activity recently though.

I propose moving the repo to ember-adopted-addons to increase visibility and perhaps attract more contributors.

What do @twokul and any of the other maintainers think?

@poteto What is the recommended way to catch the viewportEntered changes. We are using both and that breaks the addon:
https://github.com/twokul/ember-lazy-image/blob/master/addon/components/lazy-image.js#L36-L47

You first trigger the event and than set viewportEntered:
https://github.com/dockyard/ember-in-viewport/blob/76cc70431d025cff28fd2f775490e8fc36cc5535/addon/mixins/in-viewport.js#L145-L147

In our case the set seems to be too late and the image will never be visible.

As I understand it we no longer need to check if (viewportEntered && lazyUrl === "//:0") { is that correct?

When class is specified like this

{{lazy-image class="v-grid-item__img" url=mainImage errorText=""}}

check which suppose that class is an array fails, because now class is clearly a string.

After I wrote a tests, it seems like test is passing, but its failing in the application, hm

Assertion Failed: calling set on destroyed object: <ember-accounts@component:lazy-image::ember1121>.loaded = true
Error
at assert (http://accounts.ucraft.me/frontend/assets/vendor.js:16533:13)
at Object.assert (http://accounts.ucraft.me/frontend/assets/vendor.js:28284:34)
at set (http://accounts.ucraft.me/frontend/assets/vendor.js:33030:22)
at Class. (http://accounts.ucraft.me/frontend/assets/vendor.js:101662:20)
at invokeWithOnError (http://accounts.ucraft.me/frontend/assets/vendor.js:10890:16)
at Queue.flush (http://accounts.ucraft.me/frontend/assets/vendor.js:10949:9)
at DeferredActionQueues.flush (http://accounts.ucraft.me/frontend/assets/vendor.js:11073:15)
at Backburner.end (http://accounts.ucraft.me/frontend/assets/vendor.js:11143:23)
at http://accounts.ucraft.me/frontend/assets/vendor.js:11709:16

fixed: master...TigranSimonyan:patch-1

With [email protected], you no longer need to use an observer to observe viewportEntered changing. Instead, we can now handle it like any other hook:

export default Ember.Component.extend(InViewportMixin, {

  // with prototype extensions disabled
  handleDidEnterViewport: Ember.on('didEnterViewport', function() {
    console.log('entered');
  }),

  handleDidExitViewport: Ember.on('didExitViewport', function() {
    console.log('exited');
  }),

  // with prototype extensions enabled
  handleDidEnterViewport: (function() {
    console.log('entered');
  }).on('didEnterViewport'),

  handleDidExitViewport: (function() {
    console.log('exited');
  }).on('didExitViewport'),

  // method override 
  didEnterViewport() {
    console.log('entered');
  },

  didExitViewport() {
    console.log('exited');
  }
});

This would be a good issue for new contributors to work on!

• Update ember-in-viewport to 1.2.0
• Remove observer
• Use Ember.on instead

Hi,
I am using ember 1.11.2 with cli 0.2.3 and the component is showing an error message when the image is not fully inside a view port. when I try to override ember-in-viewport options the component crashes. is this compatibility issue?

I am attempting to use this inside a component that is being rendered inside an each loop

// ITEMS ROUTE
{{#each model key="id" as |item|}}
    {{event-item item=item}}
{{/each}}

// EVENT-ITEM COMPONENT
{{#link-to "item" item}}
    {{lazy-image url='https://s3.amazonaws.com/bidr-uploads/item-images/{{localStorage.user.active_auction}}/{{cropped-image item.item_image}}' class="item-image" alt="{{item.item_name}}"}}
    ...
{{/link-to}}

Any idea as to what is happening here?