pentiado / angular-lazy-img Goto Github PK

in my app.js i wrote
app.config(['lazyImgConfigProvider', function(lazyImgConfigProvider){
setTimeout(function(){
var scrollable = document.querySelector('#int-scroll');
lazyImgConfigProvider.setOptions({
offset: 100,
errorClass: 'error',
onError: function(image){},
onSuccess: function(image){},
container: angular.element(scrollable)
});
},1000)
}]);

So I am using lazy load in listing page. But app.config runs on first load. So if I refresh the listing page(whole app on listing page),it works fine. But when i come from home page it does not work because app.config wont run again.

I want to run the code above when i reach listing controller. Please help

Hi, i would need to change the size/position of the spinner when. In a example like this:

<img src='spinner.gif' lazy-img='photo.jpeg' />

is there any way to add a class to the image while the image is being loaded, so the class would style the spinner?

Thanks

The plugin works fine except it doesn't work well with filters.
I'm not sure if it's possible

Example:

<li ng-repeat="product in products | filter:category">
    <img lazy-img="{{ product.mainImg }}" />
  </li>

$rootScope.$emit('lazyImg:refresh');
not working

plase note that the attribute to add to a container on a dynamic page is lazy-img-container (in kebab case) rather than the actual name lazyImgContainer (in camel case)

Even though this is convention in Angular, it still got me ;)

On ie9 i have container which have other divs which have images - they all have to has same height - im using here matchHeight. What i want some event/directive or something which will occure when image is loaded and it can execute my function, but not this onSuccess function cuz i dont need it on every page to be executed.

If I have an image in a second page your code doesn't work because locates for 'window' or 'container' in the main page.

... in config code...

scrollable = document.querySelector('#scrollable')
container: angular.element(scrollable)

i'm use ionic, when go back to list page like use code $ionicHistory.goBack();，all of the images don't show。i must to scroll the page, then the images will show，please help me.

my list page code:

<div class="cover" lazy-img="{{item.coverImg | img}}"></div>

the item is dynamic data of ajax request.

use $rootScope.$emit('lazyImg:refresh'); not work!!!

Hi, I really like the angular-lazy!

One problem, if I've a ngRepeat and use the search:

When the filter execute the search, the image still not loaded until I scroll the page.

Any idea if this is fixable ?

Hello,

I am developing an admin panel with Angular Material (material.angularjs.org) and lazy-img is not working correctly with md-tabs. It only shows the images from first tab.

Can you direct me to a working example of this directive?

I have the following scenario: a page with thousands of images distributed in tenths of nested <li>s. By default, these <li>s are hidden, but “in view” because its parent element (<ul>) is.

I think instead of only loading images that are “in view” we should also constraint to those that are “visible”.

What do you think?

Code:

<div class="ot-panel-block"> <div class="post-image"> <img style="position:absolute;top:10px;right:10px;" lazy-img='{{restaurante.logo}}' alt="logo {{restaurante.name}}" /> <img lazy-img='{{restaurante.photo1}}' src="images/restaurante/principal.png" alt="" /> </div> </div>

Only apply lazyload in last img

I've seen this already #10

However i've noticed that the success event is triggered before the actual download. What i'm trying to do is to add an img-responsive class after the download, otherwise my gif spinner is upscaled and deformed.

$rootScope.$on('lazyImg:success', function(event, data){
	debugger;
	angular.element(element[0].querySelector('img')).addClass('img-responsive');
});

Is it there any way to do this, and is this library still maintained?

Hi,
I have an array of images in ng-repeat and when page loads, I scroll to the page that was previously on focus. Now, when I scroll up, The previous image does not load until I scroll till the top of that image. I tries to call the refresh event but yielded no result.
NOTE : the container directive is placed on another directive called awezoom

If I have two divs, one for view1 and another for view2 with "ng-show" and "ng-click" to toggle betwen them, if I set lazy-img tag on both, it will load all of the images from the second invisible div. If it entirely comment out that div it will only load the first 12 images as it should correctly. I checked the source of the hidden div (view2) and all of the img tags had the "src" attribute appended.

Is there anyway around this?

in NPM the latest version is 1.2.0 but I want the 1.5.1.
https://www.npmjs.com/package/angular-lazy-img
https://github.com/Pentiado/angular-lazy-img/releases
could you fix this ?

This commit by @Pentiado causes an error when using this library
LazyImgMagic is not a constructor
Suggestion: The '$log' dependency injection should be placed before the 'LazyImgMagic'

I am using angular-lazy-img with angular 1.5.8. The image lazy load is working fine on chrome but not working safari.

here is the sample img tag---
< img id="list-img-id" class="list-imgs lazy list-row-img" lazy-img="{{near.coverImage}}" alt="{{near.displayName + ' ' +near.displayNameLocation}}" style="" >

here is lazyImgConfig function---

config(['lazyImgConfigProvider', function(lazyImgConfigProvider) {
setTimeout(function() {
console.log('lazyImgConfigProvider',lazyImgConfigProvider);
var scrollable = document.querySelector('#hawai');
lazyImgConfigProvider.setOptions({
offset: 1, // how early you want to load image (default = 100)
errorClass: 'error', // in case of loading image failure what class should be added (default = null)
successClass: 'success', // in case of loading image success what class should be added (default =
null)
onError: function(image) {}, // function fired on loading error
onSuccess: function(image) {}, // function fired on loading success
container: angular.element(scrollable) // if scrollable container is not $window then provide it here
});
}, 1000)

}]);

please let me know whats the issue and how can i fix it.

I think lazyImg:refresh is being called more than it is supposed to be.

Scenario:
If I have around 100 images loaded using lazyImg and I navigate to a different view and then come back again to the same view. The linking of the directive is done again and so this time, when the lazyImg:refresh event is triggered, the observer ($rootScope.$on('lazyImg:refresh'...) is called 200 times, then 300 and so on.

This becomes a problem when I have around 900 images on page and so the refresh grows like 900, 1800, 2700 and so on.

I am not sure about the threshold, but I observe this unresponsiveness when I have 920 images and I navigate to/away the page more than 3 times.

When I change lazy-image value to another value, image is loaded afresh which is intuitive.
But classes added with errorClass and successClass options are not cleared.
So at the and I could have element with both classes.
I don't know whether it is desired behaviour or a bug.

Could we implement a method to kickoff your utility when we decide? Reason i ask is i have callbacks and stuff going on that takes a few before the page renders with the controls your program is expecting and therefore your control didn't work. I had to rig it with this code which i know is not the best method but at least it's working. Also, having the config try and load the element doesn't work for obvious reasons and this looked like issue #4 but after implementing the directive it didn't appear to do anything.

 angular.module('angularLazyImg').factory('LazyImgMagic', [
 '$window', '$rootScope', 'lazyImgConfig', 'lazyImgHelpers',
 function($window, $rootScope, lazyImgConfig, lazyImgHelpers){
 'use strict';

var winDimensions, $win, images, isListening, options;
var checkImagesT, saveWinOffsetT, containers;

images = [];
isListening = false;
options = lazyImgConfig.getOptions();
$win = angular.element($window);
winDimensions = lazyImgHelpers.getWinDimensions();
saveWinOffsetT = lazyImgHelpers.throttle(function(){
  winDimensions = lazyImgHelpers.getWinDimensions();
}, 60);
// ***********  H E R E    I  S    T  H  E    N  E  W    C  O  D  E
keepchecking();
function keepchecking(){
  var thescroll = document.querySelector('size-sensitive-div#scrollable');
  var whatever = angular.element(thescroll);
  containers = [whatever || $win];
  if(containers[0].context === undefined){
    setTimeout(function(){
      keepchecking();
    }, 200);  
  }
}

//containers = [options.container || $win];

In documentation in configuration section we have information about onError and onSuccess function which should receive image paramater. But I cannot find description of the parameter in documentation.

  angular.module('your.module', [
    'angularLazyImg'
  ]).config(['lazyImgConfigProvider', function(lazyImgConfigProvider){
    var scrollable = document.querySelector('#scrollable');
    lazyImgConfigProvider.setOptions({
      offset: 100, // how early you want to load image (default = 100)
      errorClass: 'error', // in case of loading image failure what class should be added (default = null)
      successClass: 'success', // in case of loading image success what class should be added (default = null)
      onError: function(image){}, // function fired on loading error
      onSuccess: function(image){}, // function fired on loading success
      container: angular.element(scrollable) // if scrollable container is not $window then provide it here
    });
  }])

Please create a new tag with the latest changes (v1.1.0) :)

$ bower install --save angular-lazy-img#1.1.0
bower angular-lazy-img#1.1.0       not-cached git://github.com/Pentiado/angular-lazy-img.git#1.1.0
bower angular-lazy-img#1.1.0          resolve git://github.com/Pentiado/angular-lazy-img.git#1.1.0
bower angular-lazy-img#1.1.0     ENORESTARGET No tag found that was able to satisfy 1.1.0

Additional error details:
Available versions: 1.0.2, 1.0.1, 1.0.0

Please see here, image are not displayed if I scroll quick without touching the scrren at the end of the scroll : Vidéo here

I'm working on an android phone, angular and cordova.

So i have this kind of code:

<div class="col-12 offer-box">
	<div class="offer-img tt1" lazy-img="css/images/transfery_na_lotniska.webp">
		<a href="#">
			<div class="desc-text">
				<h3>header</h3>

				<div class="hover-text">
					<p>text</p>
					<button class="see-more">więcej</button>
				</div>
			</div>
		</a>
	</div>
	<div class="desc-img">
		<h3>header</h3>

		<p>text</p>
		<a class="see-more" href="#">Zobacz więcej <i class="fa fa-angle-right"
													  aria-hidden="true"></i></a>
	</div>
</div>
<div class="col-12 offer-box">
	<div class="hidden-lg-down quote-text quote-left d-flex align-items-center">
		<div>
			<h5>header.</h5>

			<p>text.</p>
		</div>
	</div>
	<div class="offer-img tt1" lazy-img="css/images/wynajem_autokarow.webp">
		<a href="#">
			<div class="desc-text">
				<h3>header</h3>

				<div class="hover-text">
					<p>text</p>
					<button class="see-more">więcej</button>
				</div>
			</div>
		</a>
	</div>
	<div class="desc-img">
		<h3>header</h3>

		<p>text</p>
		<a class="see-more" href="#">Zobacz więcej <i class="fa fa-angle-right"
													  aria-hidden="true"></i></a>
	</div>
</div>

And few more. No matter how many of them i have, it'll only show last one.

In pevious part of document i have directive with this inside:

<li class="news-list" ng-repeat="row in feed">
                                <div class="img-feed" lazy-img="{{row.image}}" style="background: no-repeat 50% / cover"></div>
                                <h4>{{row.title}}</h4>
                            </li>

and it's working 100% fine. Don't think webp format is issue here. I had all on png and wasn't working anyway.

What i noticed, that lazyimg is deployed for every corrupted image but will always show src of last one.

Hi,
I am wondering if your plugin is able to handle picture tag ?
<picture> <source type="image/webp" srcset="/webp/image.webp"> <img src="/img/image.png" alt="Logo"> </picture>

After first assigning an image source to the lazy-img attribute, subsequent changes to the attribute value are not picked up.

I think this used to work and would be a good feature.

Reversing change e33b011 (i.e. removing the deregister() call that was added inside the attribute observer) fixes the issue.

Hello everybody,

I face an issue to work with the scrollable container as my container is generated using ng-view, it doesn't exist during the configuration step. Do you have any idea how I can solve this issue or is it dependent to the library ?

I had added a question on stackoverflow regarding this : Stack question linked

Thanks in advance,
Julien

Hello,

could you provide a helper or something to trigger the image check manually?
My problem: I have an image slider which will show images in an overflow: hidden wrapper, when clicking on an arrow. But the images won't be visible unless I scroll the entire page up or down.
So it would be nice if there was a function I could call on every click on the arrow.

Using the default settings everything works fine in Chrome, but when using Firefox, the images aren't loaded. There are no errors in the console.

Have you tested this in Firefox?

Can this be made to work with iframes

Hi,

I have a issue where images are in the view but are not loaded until we do scrolling?
Can you please fix this ?

Hi, im using ionic 3 and angular 5. where do i put this code?

angular.module('your.module', [ 'angularLazyImg' ]);

I tried to put it after the export class AppModule in app.module.ts but there is an error and the suggestions are not helping

This is the code in my app.module.ts:

`import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, Slide, Slides } from 'ionic-angular';
import { FormControl, FormGroup, Validator } from "@angular/forms";

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Year2018Page } from '../pages/year2018/year2018';
import { Year2017Page } from '../pages/year2017/year2017';
import { Year2016Page } from '../pages/year2016/year2016';
import { AboutPage } from "../pages/about/about";
import { March2018pdfPage } from "../pages/march2018pdf/march2018pdf";
import { ContactusPage } from '../pages/contactus/contactus';
import { LoginPage } from "../pages/login/login";
import { RegisterPage } from "../pages/register/register";
//import { SplashPage } from '../pages/splash/splash';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicImageViewerModule } from 'ionic-img-viewer';
import { February2018pdfPage } from '../pages/february2018pdf/february2018pdf';
import { January2018pdfPage } from '../pages/january2018pdf/january2018pdf';

//import { InAppBrowser } from '@ionic-native/in-app-browser';
//import { DocumentViewer } from '@ionic-native/document-viewer';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
Year2018Page,
Year2017Page,
Year2016Page,
AboutPage,
March2018pdfPage,
February2018pdfPage,
January2018pdfPage,
ContactusPage,
LoginPage,
RegisterPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicImageViewerModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
Year2018Page,
Year2017Page,
Year2016Page,
AboutPage,
March2018pdfPage,
February2018pdfPage,
January2018pdfPage,
ContactusPage,
LoginPage,
RegisterPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
//InAppBrowser,
//DocumentViewer,
]
})
export class AppModule {}`

There is problem with loading images in elements with or their parents have position fixed.
I have popup which stay always below list of items. At click on one of items Im calling this 'modal', but picture don't loads.

Problem is in this condition :
if (image && lazyImgHelpers.isElementInView(image.$elem[0], options.offset, winDimensions)) { loadImage(image); images.splice(i, 1); }

When i moved loadImage(image) out of condition directive is working fine.

Im using ionic 1.5 (in particular <ion-content>) as container for a list of images. But when try to use lazyImgConfigProvider during angular config phase <ion-content> doesnt exist in dom.

Is there any way to config <ion-content id="my-container"> as a container for a list of lazy-loaded images?

Thanks.

Hi,
I have angular app, which has iframe and all images should load inside of iframe.
Same time, on load it alters image src to some default one and adds 'lazy-img' to image with image src.
Doesn't work even with $rootScope.$emit('lazyImg:refres')
Any idea how to make it work?