jQuery.Zyklus zeigt kleine Bilder auf den ersten laden

Ich habe Probleme mit jQuery.cycle-plugin. Beim ersten laden der Seite (wenn imgs nicht zwischengespeichert) es zeigt kleine imgs, wie thumbnails. Sie können es sehen (edit: sorry, der alte link) - kurz warten, wenn der zweite img-zeigt - es ist klein. Reload/refresh löst es, aber es ist keine echte Lösung ist, wissen Sie.

Weiß jemand, was ist die Lösung für dieses problem? Vielen Dank

  • Alles funktioniert einwandfrei auf FF 3.6 RC2. Auf Chrome 4.0.249.64 (beta) zu und auch auf IE6. Welchen browser verwenden Sie?
  • Ich zweite, was Balon sagt. FF in OS X und IE7 in windows - sieht toll aus.
  • Hölle, ich bin mit Opera/Win7, getestet in IE8 und FF3.5 zu. Mein client hat Safari/Mac und ich denke, ich habe Antwort über verbugt arbeiten dieser von Lasten von ppl 🙁
InformationsquelleAutor A123321 | 2010-01-17
  1. 5

    Verwenden $(window).load(function() { }); eher als $(document).ready(function() { });

    InformationsquelleAutor Tom
  2. 5

    Verwenden overflow:hidden auf den Bildern container DIV

    • Während dies nicht beheben das OP-Problem, es funktioniert lösen Sie den Blitz der alle Bilder.
    InformationsquelleAutor acidrain
  3. 4

    Gleiche Problem. Zufalls-Bilder immer waren Sie inline-Stile von 24px x 24px. Anstatt jedes Bild in Höhe und Breite, habe ich so durch CSS. Da meine Breite war eine Feste Breite, die ich setzen, sondern setzen Sie die Höhe auf 100%:

    .ParentDiv img { width: 400px !important; height: 100% !important; }

    Den !wichtig, ist notwendig, um das überschreiben der inline-Formatvorlagen von jQuery Zyklus.

    Dieser schien auch zu lösen ein anderes Problem hatte ich mit IE8. Die Seite laden würde in Ordnung, aber die Bilder Schienen geladen zu werden, nach der alle CSS-und jquery geladen. Dies verursacht die box nicht zu erweitern, passen Sie die Höhe und Breite der Bilder in. Ich kann mir vorstellen Einstellung der Breite und Höhe der box halten die Bilder angepasst wurde, rechts von der Fledermaus.

    InformationsquelleAutor sclev
  4. 3

    Ich hatte das gleiche Problem und es treibt mich in den Wahnsinn! Ich habe versucht, pre-laden der Bilder, überprüft die Versionen auf etc alles ohne Erfolg.. Das einzige, was schien, dies zu beheben, wurde die Einstellung der Breite und Höhe auf jedem Bild auf der Seite, anstatt in css.

    • Ich hatte dieses problem, und dieses Update scheint geklappt zu haben
    • Yup, das ist, was ich Tat, auch nach dem Versuch, eine million andere Dinge.
    InformationsquelleAutor Oliver Tani
  5. 0

    Ich löste dies durch Einstellung der Breite und Höhe in die <img> tag. Aber da bin ich mit einem Skript zu generieren, die die Liste der Bilder, und Sie haben manchmal unterschiedliche Größen, ich habe ein klein wenig von php um dieses Problem zu lösen:

    function displayimage($filename) {
    $imgsize = getimagesize("$filename");
    echo "<img src=\"$filename\" $imgsize[3] />\n";
}

    $imgsize[3] ist, zum Beispiel width="585" height="285".

    Und dann, um alle jpgs in das Verzeichnis, in dem Sie die Diashow:

    <div class="slideshow">
<?php
foreach (glob("*.jpg") as $filename) {
    displayimage($filename);
}
?>
</div>

    Ausgabe

    <div class="slideshow">
<img src="cat.jpg" width="575" height="256" />
<img src="dog.jpg" width="475" height="350" />
<img src="frog.jpg" width="675" height="300" />
</div>
    InformationsquelleAutor jimmy
  6. 0

    Während Sie möglicherweise nicht direkt eine Antwort auf die Frage (die jQuery.cycle-plugin ist mir unbekannt), viele der Antworten hier das problem der Verarbeitung der Bilder nach dem laden und das ist auch, was die Leute kommen hier zu suchen. Also hier geht es, was ist Los:

    Den 24px durch fehlerhafte Logik auf browser-Seite - wieder vorzeitig Abmessungen für einen Platzhalter Kontrolle. Sie haben eine unterschiedliche Steuer-Logik für die Handhabung von zwischengespeicherten Bilder, IE nicht sogar auslösen onload für Sie, und das ist, warum die ganze Verwirrung kommt.

    Zuverlässiger als (width===0) überprüfung werden alle über das internet gefunden, wenn ein Bild geladen ist, wird die .complete DOM-Eigenschaft nur selten erwähnt, offenbar unterstützt durch alle gängigen Browser: http://www.w3schools.com/jsref/prop_img_complete.asp

    dieser arbeitete für mich:

    $("img")
    .one('load', onLoadRoutine)
    .each(function() {
        if(!this.complete) {
            return; //.one() will fire eventually
        } else {
            onLoadRoutine({delegateTarget:this}); //fake event object
        }
    });

    Hinweis: die Veranstaltung mockup Objekt {delegateTarget:this}. Wünschenswert wäre jQuery(this).trigger('load'), aber ich kann es nicht empfehlen, da ich nicht versuchen, es aus zu der Zeit...

    den .complete test sollte den Fall zu lösen der fehlerhaften 24px Platzhalter-control-Logik, die .one('load').each(). umfasst die control-flow-split-Cache/entfernte.

    InformationsquelleAutor informatik-handwerk.de
Schreibe einen Kommentar