Preloading Image für das Jquery Reel Plugin

Hallo zusammen,

nachdem ich versucht habe mit zahlreichen "Walkarounds" das Problem selbst zu lösen, aber kläglich gescheitert bin, hoffe ich hier bei euch im Forum Hilfe zu finden.

Das Problem:

Ich benutze ein OpenSource Javascript/bzw. Jquery basiertes Plugin namens -->Jquery Reel. Dieses Plugin ermöglicht es mir eine Bildsequenz aus mehreren Einzelbildern zu laden und eine 360° Grad Rotation zu erzeugen.

Beispiel des Plugin: http://test.vostrel.net/jquery…ct-movie-camera-sequence/

Homepage des Plugins: http://jquery.vostrel.cz/reel

Habe das Plugin bereits erfolgreich eingerichtet und es funktioniert soweit. Was mich allerdings noch etwas stört ist der Preloader. Bei größeren Bildern mit längerer Ladezeit (ca.6-10 Sekunden) läuft momentan ein kleiner Fortschrittsbalken am unteren Bildrand.

Dies würde ich gerne wie folgt ändern: anstatt des sich aufbauenden Ladebalkens, soll einfach so lange ein Bild/bzw. animiertes .Gif zu sehen sein, bis der Player vollständig alle Bilder geladen hat.

--> Habe bereits einen Webseiten Preloader (wie hier:

Hättet ihr eine Idee, wie man dies umsetzen könnte?

Vielen Dank für Eure Hilfe!

Christian

PS: es gab bereits eine Anfrage dies Umzusetzen (sieher hier: https://github.com/pisi/Reel/issues/52 ) , welches aber vom Entwickler des Scripts ziemlich schnell und herzlos abgeschmettert wurde....

Nochmal hi zusammen,

da es bisher auch von euch noch leider keine Ideen/Vorschläge gab, habe ich einmal den Autor des Plugins angesprochen, welcher mir folgendes geantwortet und diese Tipps gegeben hat:

Zitat

Hi Chriss,



this is be very easy when you bind to the right events. Reel is

triggering a `preload` event when it starts the frame preloading

process (here is where you show your preloader image) and when it

finishes it triggers `loaded` event (this is when you hide it). It

also triggers `preloaded` event after every image it successfully

preloads so that you can adjust the percentage of a progress bar for

example.



Good luck!



Petr

Alles anzeigen

mit diesen Hinweisen habe ich anschließend im Quellcode des Plugins (siehe hier: Quellcode Jquery Reel) gestöbert und den beschrieben Abschnitt gefunden (ab Zeile 1245):

// ### `preload` Event ######
                  // `Event`, since 1.1
                  //
                  // Reel keeps a cache of all images it needs for its operation. Either a sprite or all
                  // sequence images. It first determines the order of requesting the images and then
                  // asynchronously loads all of them.
                  //
                  // - It preloads all frames and sprites.
                  //
                  preload: function(e){
                    var
                      $overlay= t.parent(),
                      images= get(_images_),
                      is_sprite= !images.length,
                      order= reel.preload[opt.preload] || reel.preload[reel.def.preload],
                      preload= is_sprite ? [get(_image_)] : order(images.slice(0), opt, get),
                      to_load= preload.length,
                      preloaded= set(_preloaded_, is_sprite ? 0.5 : 0),
                      simultaneous= 0,
                      $cache= get(_cache_).empty(),
                      uris= []
                    $overlay.addClass(loading_klass);
                    // It also finalizes the instance stylesheet and prepends it to the head.
                    set(_style_, get(_style_) || $('<'+_style_+' type="text/css">'+css.rules.join('\n')+'</'+_style_+'>').prependTo(_head_));
                    set(_loading_, true);
                    t.trigger('stop');
                    opt.responsive && gauge();
                    t.trigger('resize', true);
                    while(preload.length){
                      var
                        uri= reel.substitute(opt.path+preload.shift(), get),
                        $img= $(tag(_img_)).data(_src_, uri).appendTo($cache)
                      // Each image, which finishes the load triggers `"preloaded"` Event.
                      $img.bind('load error abort', function(e){
                        e.type != 'load' && t.trigger(e.type);
                        return !detached($overlay) && t.trigger('preloaded') && load() && false;
                      });
                      uris.push(uri);
                    }
                    setTimeout(function(){ while (++simultaneous < reel.concurrent_requests) load(); }, 0);
                    set(_cached_, uris);
                    set(_shy_, false);
                    function load(){
                      var
                        $img= $cache.children(':not([src]):first')
                      return $img.attr(_src_, $img.data(_src_))
                    }
                  },

                  // ### `preloaded` Event ######
                  // `Event`, since 1.1
                  //
                  // This event is fired by every preloaded image and adjusts the preloader indicator's
                  // target position. Once all images are preloaded, `"loaded"` Event is triggered.
                  //
                  preloaded: function(e){
                    var
                      images= get(_images_).length || 1,
                      preloaded= set(_preloaded_, min(get(_preloaded_) + 1, images))
                    if (preloaded === 1) var
                      frame= t.trigger('frameChange', [undefined, get(_frame_)])
                    if (preloaded === images){
                      t.parent().removeClass(loading_klass);
                      t.trigger('loaded');
                    }
                  },

                  // ### `loaded` Event ######
                  // `Event`, since 1.1
                  //
                  // `"loaded"` Event is the one announcing when the instance is "locked and loaded".
                  // At this time, all is prepared, preloaded and configured for user interaction
                  // or animation.
                  //
                  loaded: function(e){
                    get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path+get(_image_), get)) }).attr({ src: cdn(transparent) });
                    get(_stitched_) && t.attr({ src: cdn(transparent) });
                    get(_reeled_) || set(_velocity_, opt.velocity || 0);
                    set(_loading_, false);
                    loaded= true;
                  },

                  // ### `prepare` Event ######
                  // [NEW] `Event`, since 1.3
                  //
                  // In case of `shy` activation, `"prepare"` event is called instead of the full `"setup"`.
                  // It lefts the target image untouched waiting to be clicked to actually setup.
                  //
                  prepare: function(e){
                    t.css('display', _block_).parent().one(_click_, shy_setup);
                  },

trotzdem verstehe ich bisher nur einen kleinen Teil des Codes und weiß nicht wie, bzw. wo ich am besten das Preloading-Bild einfüge/einbinde, so dass es immer angezeigt wird bis der Player komplett geladen hat

habt ihr vllt eine Idee? bzw. könnt Licht ins dunkel bringen?

Viele Grüße

Christian

Hi Arne,

genau da liegt mein Problem.... der Code ist zwar sehr gut und ausführlich erklärt, ich verstehe Ihn aber mit meinen einfachen Java-Grundkenntnissen leider nur zur hälfte, bzw gar nicht richtig.

Könntest du bzw. ein anderer netter User aus dem Forum mir mal die einzelnen Zeilen und deren Funktion im Script etwas genauer, bzw. in einfachen Worten erklären, damit sich mir ich die Logik dahinter etwas besser erschließt? würde echt gerne mal ein bisschen mehr über das Script im Detail lernen wollen...

wo wäre es denn deiner Meinung nach am einfachsten ein Bild einzubauen? wenn ich es richtig verstehe...ist das preloaded event doch lediglich dazu da einen sich kontinuierlich aufbauenden Fortschrittsbalken zu generieren, da dieser bei jedem geladenen Quellbild immer +1 triggert und der Fortschrittsbalken so bis 100% fortschreitet....

VG und ein schönes Wochenende an alle!

Christian

Hi Semper,

diese Idee hatte ich bereits ebenfalls... habe als image-src bereits ein Loading Gif erstellt und eingefügt. Auch bei mir wird es nur kurz dargestellt und sofort durch die anderen (Quell) Bilder aus den data-images ersetzt, welche ja die Einzelbilder/einzelnen Winkelschritte für die Rotation sind.

Dachte auch, dass wenn ich das Img-src Bild als Gif Bild mit einer Abspieldauer von 10 sek erstelle... es zumindest erst einmal 10 sek gezeigt wird (also bis die Animation beendet ist) und erst dann wechselt... leider nicht der fall...blinkt kurz auf und verschwindet wieder sofort.

Denke mal das das Src Image vor allem bei der Benutzung eines sog. Sprite Sheets (also einem großen Einzelbild, in welchem alle Quellbilder vereint sind) sinn macht, aber nicht, wenn man die Quellbilder eh alle einzeln lädt...

trotzdem vielen Dank für deine Idee!

VG Christian

Hi Semper,

das kommt ganz auf die Bildgröße an. Habe Sie momentan recht klein gehalten, damit sie (bzw. das 3D Objekt im gesamten) schnell laden. Wenn die Auflösung oder die Gesamtanzahl der Quellbilder größer wird (z.b. bei mehreren Reihen und Zeilen in einem 3D Objekt) dauert es erheblich länger.

Das Problem ist jedoch nicht, dass die Bilder schnell oder langsam geladen werden, sondern eher, dass der Nutzer nur eine unvollständige, abbrechende bzw. stockende 360° Grad Rotation des Objektes angeboten bekommt, wenn noch nicht alle Bilder komplett geladen wurden.

Diese möchte ich halt gerne irgendwie umgehen, so dass das fertige 3D Objekt erst angezeigt wird, wenn es wirklich zu 100% vollständig geladen wurde. Vorher soll halt so lange ein Preloading Bild gezeigt werden...

hättest du eine Idee für eine Umsetzung?

VG und schönes WE!

Christian

Hi Semper,

vielen Dank für den Tipp und die ausführliche Erklärung! habe mich sehr gefreut mal wirklich gute Infos zu bekommen.

Denke mal es hat "klick" bei mir gemacht

werde berichten ob es funktioniert....

VG Christian

Hi zusammen,

habe Sempers Tipp versucht umzusetzen...ohne Erfolg. Deshalb brauche ich leider erneut eure Hilfe....da ich denke, dass ich einen Denkfehler bei der Umsetzung habe....

bisher habe ich folgendes gemacht:

<div id="peelwrapper">
    <img src=" ... " hier alles was Du für Peel benötigst >
    <img src="loadimg.gif" id="loadimg">
</div>

diesen Code habe ich in den <Body> Tag meiner Webseite eingefügt, auf welcher das 3D Bild/Panorama angezeigt wird. Bei Img Src = "... " hier alles was du für Peel benötigst ---> habe ich die Bildadresse zum Ladebild, was den Player überlagern soll eingegeben.

#peelwrapper {
    position: relative;
}
#loadimg {
    position: absolute;
    left: 0;
    top: 0;
}

Diesen CSS Code habe ich so wie er ist als extra <style> Tag in den <head></head> Abschnitt eingefügt.

und zu guter letzt:

// `"loaded"` Event is the one announcing when the instance is "locked and loaded".
                  // At this time, all is prepared, preloaded and configured for user interaction
                  // or animation.
                  //
                  loaded: function(e){
                    document.getElementById("loadimg").style.display = "none";
                    get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path+get(_image_), get)) }).attr({ src: cdn(transparent) });

in der original Javascript Datei (jquery.reel.js) mit diesem Code von Semper ausgetauscht.

Habe ich hier einen Denkfehler begangen? Was könnte das Problem sein, das es nicht funktioniert?

Zum besseren Verständnis hier noch einmal kurz der Code, den ich für die HTML Seite benutze, auf welcher der Player angezeigt wird:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepagetitel</title>

<style>
* { cursor: url(maus.cur), default; }
</style>

<style>
#peelwrapper {
    position: relative;
}
#loadimg {
    position: absolute;
    left: 0;
    top: 0;
}
</style>

  </head>
  <body>

<div id="peelwrapper">
    <img src="Ladebild.gif" hier alles was Du für Peel benötigst >
    <img src="loadimg.gif" id="loadimg">
</div>


<script src="jquery-3.3.1.js"></script>
<script src='jquery.reel.js' type='text/javascript'></script>



<img src="DSC_0200.gif" width="632" height="421"
      class="reel"
      id="image"
    data-cursor="url(maus.cur), default;"
    data-break="0.03"
          data-images="DSC_####.jpg|0200..0271"
    data-delay="900"
    data-frame="1"
    data-frames="72"
    data-speed="0.1"
    data-opening="900"
    data-alziness="900"
    data-duration="900"
    data-tempo="900"
    data-preloader="30"
}
>
  </body>
</html>

Viele Grüße und schönes Wochenede!

Christian

habe jetzt nochmal die verschiedensten Varianten ausgetestet mit der Korrekten zuordnung des Ladebildes.

Mit folgendem Ergebnis:

Füge ich :

<div id="peelwrapper">
    <img src=" ... "> <!-- Dies ist das eigentliche Bild, das Reel anzeigen soll -->
    <img src="loadimg.gif" id="loadimg"> <!-- Dies ist das Ladebild, das das eigentliche Bild
                                          waehrend des Ladens verdecken soll -->
</div>

überhalb des Reel Players Codes auf meiner HTML Seite ein...liegt das Bild hinter dem Player. Setze ich den Code unter den Reel Player wird das Bild einfach nur unterhalb des Players dauerhaft angezeigt...

hilft das weiter?

VG Christian

Hi Semper,

erstmal danke für deine Hartnäckigkeit!!! werde jetzt erstmal versuchen dein funktionierendes Beispiel von oben bei mir zum laufen zu bekommen und dann auf mein Projekt versuchen umzusetzen....

Danke nochmal für all deine Geduld und das austesten!

VG Christian