Looking for more than a 'image preloading' library

ionic-v1
1

Hello, I have a scenario where I have an array of 70-80 odd web images. What I want to do is pass it to a component that renders these images like a movie (i.e. frames start playing). Specifically,
it should:
a) Allow me to ‘scrub’ - i.e. go forward and back
b) Pause, fast forward, rewind
b) Be smart in pre-fetching the images --> not all of them together but around the vicinity of my scrub index
c) Auto play (with duration between frames)

Does anyone know of any such libraries? I’ve been searching all day, and only came up with https://github.com/revolunet/angular-carousel which does not really meet the needs (besides being quite heavy)

thanks

2

you can use the ion-slidebox and use the Service-methods to create the play, pause, back and so on functionality.
http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/
–> you can set auto play option, play and stop
–> you can go back and forward with the slide function
–> you can add a flag if slide back --> then start an $interval thats slides to the previous slide after 2 seconds maybe
–> fast forward/back --> another flag and decrease the interval time to 1 second

And preload images --> build a directive that creates img-Elements and adds the src or add them hidden to the dom :wink:

thats it

3

Hello @bengtler, thank you for the idea. I actually think that may work!
The only thing I have no idea how to do is the part I have quoted above. Can you help in pointing me to an easy to understand resource for pre-loading? (Not part of an overtly complex library)

4

in javascript:

var image = new Image();
image.src = 'imagePath';

you can create image-nodes and attach your src.
And you can listen to the image is loaded:

image.onload = function () {
  // image loaded!
};

like this you can add not to the dom-connected images and preload the images

5

@bengtler, your idea of slide-box is very good. It automatically takes care of loading subsequent images so I don’t have to worry about pre-loading

How does on disable the “sliding” effect of slide-box?

I’ve done this

        <ion-slide-box delegate-handle="eventSlideBox" does-continue="true" slide-interval="500" show-pager="false" auto-play="true"  >
            <ion-slide ng-repeat="file in files">
           <img imageonload="finishedLoadingImage()"
                         ng-src="{{event.Event.BasePath}}{{file}}?rand={{rand}}" height="190px";/>
            </ion-slide>
</ion-slide-box>

And in the controller:
``
$ionicSlideBoxDelegate.$getByHandle(“eventSlideBox”).enableSlide(false);


But the images still slide in after 500ms.
6

the interval and auto-play is set… so the next slide is shown automatically after 500ms

7

I know, sorry if I was confusing. What I am referring to is how do I disable the “slide” effect of slide-box. I want slides to replace previous slides without the slide from right-to-left animation.