webentwicklung-frage-antwort-db.com.de

Bilder einblenden, nachdem sie geladen wurden

Ich habe diesen Code gefunden, um den gewünschten Effekt zu erzielen, und habe es auf JSFiddle ausprobiert

http://jsfiddle.net/AndyMP/7F9tY/366/

Es scheint so zu funktionieren, dass das Bild nach dem Laden eingeblendet wird. Dann habe ich es auf einer Webseite ausprobiert und es funktionierte nicht auf die gleiche Weise. Zuerst wurde das Bild geladen, anstatt es einzublenden. Obwohl es manchmal so schien, als würde es gleichzeitig eingeblendet.

Gibt es einen zuverlässigeren Weg, dies zu erreichen, möglichst durch Änderung dieses Codes?

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

11
Andy

Die einzige zuverlässige Methode, um ein Bild, das sich in Ihrem HTML-Markup befindet, fadeIn() zu verwenden, besteht darin, einen onload-Handler im HTML-Markup wie folgt festzulegen:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

Arbeitsdemo hier: http://jsfiddle.net/jfriend00/X82zY/

Auf diese Weise müssen Sie nicht jedes Bild mit einer ID oder Klasse versehen. Legen Sie einfach den Stil und den Ereignishandler im Markup fest.

Der Grund, warum Sie den Event-Handler in das Markup einfügen müssen, besteht darin, dass es zu spät sein kann, wenn Sie warten, bis das Javascript Ihrer Seite ausgeführt wird. Das Bild ist möglicherweise bereits geladen (insbesondere, wenn es sich im Browser-Cache befindet), und Sie haben möglicherweise das Ereignis onload verpasst. Wenn Sie den Handler in das HTML-Markup einfügen, verpassen Sie das Ereignis onload nicht, da der Handler zugewiesen wird, bevor das Bild geladen wird.

Wenn Sie keine Event-Handler in das Javascript einfügen möchten, können Sie so etwas tun, indem Sie einen Platzhalter für das Bild im eigentlichen HTML-Code verwenden und mithilfe von JavaScript die eigentlichen Bild-Tags erstellen und einfügen und das Bild ziehen URL vom Platzhalter:

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

Arbeitsdemo: http://jsfiddle.net/jfriend00/BNFqM/

Mit der ersten Option werden Ihre Bilder etwas schneller geladen (da das Laden von Bildern unmittelbar nach dem Seiten-Parsing beginnt), aber mit der zweiten Option können Sie den Prozess mehr programmgesteuert steuern.

37
jfriend00

Reine Java-Skript- und CSS-Lösung:

Verwenden des Überblendeffekts mit opactiy.

let images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg() {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">

4
Robbendebiene

Vielleicht interessant für Leute, die diese Frage finden und eckige.js verwenden:

Ich habe eine kleine Direktive geschrieben, die den Job recht gut macht.

JS:

.directive('imgFadeInOnload', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attr) {
        element.css('opacity', 0);
        element.css('-moz-transition', 'opacity 2s');
        element.css('-webkit-transition', 'opacity 2s');
        element.css('-o-transition', 'opacity 2s');
        element.css('transition', 'opacity 2s');
        element.bind("load", function () {
          element.css('opacity', 1);
        });
        element.attr('src', attr.imgFadeInOnload);
      }
    };
  });

HTML: 

<img img-fade-in-onload="{{imgSrc}}" src="">

Durch die Einstellung von src nicht im HTML-Code, sondern im Direktionscode wird das von jfriend00 erwähnte Problem (der Handler wird angefügt, nachdem die onload ausgelöst wurde) behoben.

4
Felix Engelmann

html

<div id="image">
    <img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

javascript

.ready () feuert sie nicht so, wie Sie glauben, siehe 'load' jQuery-Ereignishandler

$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});
4
DefyGravity

fadeIn sollte aufgerufen werden, nachdem das Image geladen wurde. Hier ist ein Beispiel: http://jsfiddle.net/mYYym/

1
stewe

Hier ist eine CSS-Übergangs- und Javascript-Lösung, die auf der Antwort von @jfriend00 basiert und der Vorgehensweise von @Robbendebiene ähnelt:

  • bietet Fallbacks zur Anzeige des Bildes, wenn js ausgeschaltet ist
  • es ist nur ein Bit Inline-Javascript erforderlich onload="this.style.opacity=1"
  • alle Animationen sind CSS, keine Notwendigkeit für jQuery oder komplexes Javascript

img.fadein {
  opacity: 1;  /* fallback in case of no js */
  transition: opacity 500ms ease;
  max-width: 100%;
  height: auto;
}
.js img.fadein {
  opacity: 0; /* start with hidden image if we have js */
}
<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">

0
squarecandy