Ich habe ein Skript, das Vollbilder dynamisch über Miniaturansichten hinzufügt, wenn Sie den Mauszeiger darüber halten. Ich habe den Vollbildern auch einen CSS: Hover-Stil gegeben, um sie auf eine größere Breite zu vergrößern (wobei sie normalerweise auf die Abmessungen des Thumbnails beschränkt sind). Dies funktioniert einwandfrei, wenn das Bild schnell geladen oder zwischengespeichert wird. Wenn jedoch das Laden des gesamten Bilds lange dauert und Sie die Maus beim Laden nicht bewegen, bleibt das angezeigte Bild in der Regel auf der Breite der Miniaturansichten (d. H non-: hover style), bis Sie die Maus erneut bewegen. Ich bekomme dieses Verhalten in allen Browsern, in denen ich es ausprobiert habe. Ich frage mich, ob dies ein Fehler ist und ob es eine Möglichkeit gibt, ihn zu beheben oder zu umgehen.

Es kann erwähnenswert sein, dass ich auch versucht habe, dasselbe in Javascript mit zu tun.on('mouseenter')und stieß auf das gleiche Problem.

Aufgrund der Art des Problems kann es schwierig sein, es zu reproduzieren, insbesondere wenn Sie eine schnelle Verbindung haben. Ich habe ein größeres Foto aus Wikipedia ausgewählt, um es zu demonstrieren, aber damit es funktioniert, müssen Sie es möglicherweise in ein besonders großes oder langsames Foto umwandeln. Beachten Sie auch, dass Sie möglicherweise den Cache für aufeinanderfolgende Wiederholungsversuche leeren müssen.

Wenn Sie immer noch nicht reproduzieren können, können Sie eine künstliche Verzögerung hinzufügenfullimage.load vor dem anruf ananchor.show().

HTML:

<img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Cairo_International_Stadium.jpg/220px-Cairo_International_Stadium.jpg" />

CSS:

.kiyuras-image {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 220px;
}

.kiyuras-image:hover {
    max-width: 400px;
}

JS:

$(function () {

    var fullimageurl = 'http://upload.wikimedia.org/wikipedia/commons/3/32/Cairo_International_Stadium.jpg';

    var fullimage = $('<img/>')
        .addClass('kiyuras-image')
        .load(function () {
            anchor.show();
        });

    var anchor = $('<a/>').hide().append(fullimage);

    $('body').prepend(anchor);

    $("#image").on('mouseenter', function () {
        fullimage.attr('src',fullimageurl);
        $(this).off('mouseenter');
    });

});

JS Bin

JS Bin mit 1,5 Sekunden Verzögerung aktualisiert (hoffentlich macht das Problem klarer)

Nochmals: Zum Reproduzieren des Problems müssen Sie den Cache des großen Bilds leeren und dann den Mauszeiger über das Originalbild halten, um das Laden des großen Bilds zu starten, ohne die Maus beim Laden zu bewegen. Das beabsichtigte Verhalten besteht darin, dass das große Bild die Pseudoklasse: hover richtig annimmt, wenn es schließlich geladen wird. Problem, das ich sehe, wenn das Laden länger als ~ 0,75 Sekunden dauert, ist, dass es nicht dauert: Schweben Sie, bis Sie die Maus ein wenig wackeln.

Bearbeiten: Weitere Details zu meinem Anwendungsfall finden Sie in meinen Kommentaren zu @ LucaFagiolis Antwort.

Bearbeiten Sie die Fortsetzung: Ich dachte, ich hätte das schon getan, aber ich habe nur versucht, das Problem in Firefox zu reproduzieren, und konnte es nicht. Vielleicht ist das ein Chrome-Bug?