Eu tenho um script que adiciona imagens dinâmicas sobre miniaturas quando você passa o mouse sobre elas. Eu também dei às imagens completas um estilo CSS: hover para fazê-las expandir para uma largura maior (onde normalmente elas são restritas às dimensões da miniatura). Isso funciona bem se a imagem for carregada rapidamente ou for armazenada em cache, mas se a imagem completa demorar muito para ser carregada e você não mover o mouse enquanto estiver carregando, uma vez que ela apareça, ela geralmente permanecerá na largura da miniatura. estilo não-hover) até mover o mouse novamente. Eu tenho esse comportamento em todos os navegadores que eu tentei. Eu estou querendo saber se isso é um bug, e se há uma maneira de corrigir ou contornar isso.

Pode ser interessante notar que eu também tentei fazer a mesma coisa em Javascript com.on('mouseenter')e encontrou o mesmo problema.

Devido à natureza do problema, pode ser difícil reproduzir, especialmente se você tiver uma conexão rápida. Eu escolhi uma foto largish da Wikipedia para demonstrar, mas para fazê-lo funcionar você pode ter que mudá-lo para algo especialmente grande ou de um domínio lento. Observe também que talvez você precise limpar o cache para tentativas sucessivas.

Se você ainda não consegue reproduzir, você pode adicionar um atraso artificial aofullimage.load antes da chamada paraanchor.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

Bin JS atualizado com atraso de 1,5 segundo adicionado (Espero que torne a questão mais clara)

Novamente: reproduzir o problema envolve limpar o cache da imagem grande e, em seguida, passar o mouse sobre a imagem original para inicializar o carregamento de uma imagem grande e, em seguida, não mover o mouse durante o carregamento. O comportamento pretendido é que a imagem grande assuma adequadamente a pseudo-classe: hover quando for carregada. Problema que vejo quando demora mais de ~ 0,75 segundos para carregar é que não demora: passe o mouse até balançar o mouse um pouco.

Editar: Veja meus comentários sobre a resposta de @ LucaFagioli para mais detalhes do meu caso de uso.

Editar, a sequela: Eu pensei que já fiz isso, mas tentei reproduzir o problema no Firefox e não consegui. Talvez este seja um bug do Chrome?