Mam skrypt, który dynamicznie dodaje pełne obrazy do miniatur po najechaniu na nie. Podałem też pełne obrazy w stylu CSS: hover, aby rozwinąć je na większą szerokość (gdzie normalnie są one ograniczone do wymiarów miniatury). Działa to dobrze, jeśli obraz ładuje się szybko lub jest buforowany, ale jeśli załadowanie pełnego obrazu zajmuje dużo czasu i nie poruszasz myszą podczas ładowania, to po pojawieniu się zwykle pozostaje na szerokości miniatury ( styl non-hover), aż ponownie poruszysz myszą. Mam takie zachowanie we wszystkich przeglądarkach, w których próbowałem. Zastanawiam się, czy jest to błąd i czy istnieje sposób na naprawienie lub obejście go.

Warto zauważyć, że próbowałem zrobić to samo w Javascript z.on('mouseenter')i napotkał ten sam problem.

Ze względu na charakter problemu może być trudny do odtworzenia, zwłaszcza jeśli masz szybkie połączenie. Wybrałem obszerne zdjęcie z Wikipedii, aby zademonstrować, ale aby to działało, być może trzeba będzie zmienić to na coś szczególnie dużego lub z wolnej domeny. Zauważ również, że może być konieczne wyczyszczenie pamięci podręcznej dla kolejnych prób.

Jeśli nadal nie możesz się odtworzyć, możesz dodać sztuczne opóźnieniefullimage.load przed wezwaniem doanchor.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

Zaktualizowano JS Bin z dodanym 1,5-sekundowym opóźnieniem (Mam nadzieję, że problem stanie się jaśniejszy)

Ponownie: odtworzenie problemu polega na wyczyszczeniu pamięci podręcznej dużego obrazu, a następnie najechaniu na oryginalny obraz, aby rozpocząć ładowanie dużego obrazu, a następnie nie przesuwać myszy podczas ładowania. Zamierzone zachowanie polega na tym, że duży obraz poprawnie przejmuje pseudoklasę: hover, gdy w końcu się ładuje. Problem, który widzę, gdy ładowanie trwa dłużej niż ~ 0,75 s, jest takie, że się nie włącza: zatrzymaj kursor, aż trochę się poruszysz.

Edytować: Zobacz moje komentarze na temat @ LucaFagioli w celu uzyskania dalszych szczegółów dotyczących mojego przypadku użycia.

Edytuj, kontynuacja: Myślałem, że już to zrobiłem, ale właśnie próbowałem odtworzyć problem w Firefoksie i nie mogłem. Może to jest błąd Chrome?