Fade-in Bildern, nachdem Sie geladen haben

Fand ich diesen code, um die gewünschte Wirkung erzielen und versuchte es auf JSFiddle

Scheint es zu funktionieren, dass es verblasst das Bild, nachdem es geladen wurde. Dann versuchte ich es in eine Webseite und es hat nicht die gleiche Weise funktionieren, laden Sie zuerst das Bild anstatt zu verblassen in. Obwohl es manchmal schien, wie es war, verblasste in der gleichen Zeit geladen.

Gibt es eine zuverlässige Möglichkeit, dies zu erreichen, vorzugsweise durch änderung dieser code, wenn möglich?

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

InformationsquelleAutor Andy | 2012-03-23

37

Die einzige zuverlässige Weg, um fadeIn() ein Bild, das in Ihrem eigentlichen HTML-markup zu setzen, ist eine onload - handler in der HTML-markup wie dieses:
```
<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>
```
Arbeiten demo hier: http://jsfiddle.net/jfriend00/X82zY/

Tun, ist auf diese Weise brauchen Sie nicht zu geben Sie jedem Bild eine id oder Klasse. Setzen Sie einfach den Stil und die event-handler im markup.

Dem Grund, die Sie haben, um die event-handler im markup ist, dass, wenn Sie warten, bis Ihre Seite das javascript ausgeführt wird, kann es zu spät sein. Kann das Bild bereits geladen sein (vor allem wenn es im browser-cache) und damit Sie verpasst haben, die onload Veranstaltung. Wenn Sie den handler in der HTML-markup, werden Sie nicht verpassen die onload Ereignis, weil der handler zugeordnet ist, bevor das Bild beginnt zu laden.

Wenn Sie nicht möchten, um event-Handler in javascript, dann können Sie so etwas tun, wo Sie einen Platzhalter für das Bild in der eigentlichen HTML-und Sie verwenden Sie javascript zum erstellen der eigentlichen image-tags und fügen Sie Sie, und ziehen Sie die Bild-URL aus dem 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>
```
Arbeiten demo: http://jsfiddle.net/jfriend00/BNFqM/

Ersten option erhalten Sie Ihre Bilder geladen, ein wenig schneller (weil das laden der Bilder beginnt sofort nach Seite Parsen), aber die zweite option gibt Ihnen mehr programmatische Kontrolle über den Prozess.
- Danke. Ich hatte ein wenig Mühe mit der option 1 im Hinblick auf andere jquery nicht korrekt ausführen. Ich gehe mit option 2 🙂
- das ist seltsam. Option 1 hat nichts zu tun mit anderen jQuery. Andere jQuery würde noch gehen, wo es in der Regel tut, in einem $(document).ready() Funktion. Ich bin froh, dass option 2 für Sie arbeitet, aber option 1 könnte auch, wenn Sie möchten, um herauszufinden, warum etwas anderes nicht funktioniert.
- Ja, ich dachte, es war seltsam, wie gut. Ich werde es geben ein anderes versuchen...
- Klappte dieses mal, keine Ahnung, was ich wollte zuerst.
- Tut 'style=display:none' in der option 1 negative Auswirkungen auf das SEO, wenn wir den Namen des Bildes mit sinnvollen slug? Ich denke so, aber nicht sicher.
- SEO Regeln sind nicht vollständig bekannt, aber da die Suchmaschinen für die meisten Teil gar nicht ausgeführt, das Javascript (die meisten von, was Sie sehen, ist Ihre erste HTML), es ist unwahrscheinlich, dass die Suchmaschine würde sogar wissen, dass Sie ein Bild erstellen, das ist display: none. Soweit die such-engine weiß, es gibt nicht einmal ein Bild gibt. Wenn Sie möchten, dass die Suchmaschine, um zu sehen, Ihre Bilder, dann sollten Sie im raw-HTML addiert, sondern via JS. Aber, die Bilder in der Regel nicht viel spielen eine Rolle in Ihrem SEO sowieso, da deren Inhalt kaum zu erkennen, andere als alt und title - tags.
- Eigentlich ist google mit dem Namen des Bildes jetzt für die SEO, so wie ich das verstehe. Vorausgesetzt, es ist eine E-Commerce Seite, sagen wir für ein Produkt, dessen sinnvolle slug wird 'emsa-Vakuum-Kanne-grün" und slug existiert in beiden Seiten-url und Bild-Namen, dann mit den 'display:none' werden mit einem Verlust (option #1). Wenn am besten bei google nicht denken, dass wir 'Füllung' keywords in den image-Namen mit der <slug>.jpg, aber display:none, dann ist auch die Bild-name wird nicht dazu beitragen, die keywords in der Seite. Also, effektiv, es ist besser die Suchmaschinen wissen, dass es ein sinnvolles Bild dort vorhandenen.
- Option #1, entfernen Sie die 'style='display:none"' und ändern Sie die 2. javascript-Zeile: $(obj).verstecken().fadeIn(1000). Das ist besser aus SEO Sicht.
- dann ist es möglicherweise kurz sichtbar, wie es lädt, bevor das js ausgeführt wird.
- Vielen Dank für diese info, habe ich nicht bemerkt, dass. Ich wollte Sie bitten, eine andere Frage: allein mit javascript ie ohne jquery, wie die onLoad-routine, wenn ich nicht will, dass jedes fading?
- wenn Sie nicht möchten, fading, was ist der Punkt, der das "onload" - handler? Was wollen Sie da tun?
- Ich möchte vermeiden, die schrittweise Anzeige des Bildes, aber im one-shot-einmal heruntergeladen. (Bilder sind im Bereich von 40-140KB) nicht wollen, dass die fanciness von fading. Und besser, wenn es ohne jQuery.
- dann machen Sie es sichtbar in plain javascript mit this.style.display = "inline";
InformationsquelleAutor jfriend00
4

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

.ready() nicht ausgelöst die Art, wie Sie denken, es tut, sehen die 'load' jQuery event-handler
```
$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});
```
- achten Sie auf die Beschränkungen .load() weiter unten in der Dokumentation
- Dies wird wahrscheinlich nicht funktionieren bei einigen Browsern, nachdem das Bild im browser-cache, da wird das Bild geladen ist, bevor javascript ausgeführt wird, so wirst du nie sehen das load-Ereignis.
- ja, das ist in der Dokumentation auf .load()
InformationsquelleAutor DefyGravity

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

Ich geschrieben habe, eine kleine Richtlinie, die nicht den job ganz gut.

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 Einstellung src nicht in HTML, sondern in die Richtlinie code das problem erwähnt jfriend00 (handler angefügt ist nach der onload ausgelöst wird) gelöst ist.

Ich beabsichtige einen Versuch mit angular.js - Dank für die Buchung.
Beste Lösung bei der Verwendung von Angular. Fantastisch!

InformationsquelleAutor Felix Engelmann

Reine java-script und CSS-Lösung:

Mithilfe der übergänge-Effekt mit opactiy.

JS:

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";
}

HTML:

<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">

Guter Ansatz. Nur Bedenken Sie, dass css-übergang funktioniert nicht im IE9 oder niedrigeren version.
Diese basiert immer noch auf "laden"

InformationsquelleAutor Robbendebiene

1

fadeIn sollte aufgerufen werden, nachdem das Bild geladen wurde. Hier ist ein Beispiel:
http://jsfiddle.net/mYYym/
- Wie könnte ich das machen, dass die Arbeit für mehrere Bilder auf der gleichen Seite? Ich will nicht wiederholen Sie den gleichen code und geben jedem Bild eine eigene ID, sonst wie es scheint, nur das erste Bild geladen.
- Hier ist ein Beispiel: jsfiddle.net/8fwfV
- Dies wird wahrscheinlich nicht funktionieren bei einigen Browsern, nachdem das Bild im browser-cache, da wird das Bild geladen ist, bevor javascript ausgeführt wird, so wirst du nie sehen das load-Ereignis.
InformationsquelleAutor stewe

Hier ist eine css-transition und die javascript-Lösung auf Basis von @jfriend00 Antwort und ähnlich dem Ansatz von @Robbendebiene:

bietet fallbacks, um das Bild anzuzeigen, wenn js ausgeschaltet ist
nur ein bit der inline-javascript wird benötigt onload="this.style.opacity=1"
alle Animationen mit CSS zu tun, keine Notwendigkeit für jQuery oder komplexe javascript -

CSS:

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 */
}

HTML:

<!-- 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/">

InformationsquelleAutor squarecandy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.