Предварительная загрузка изображения Chrome не работает при первой загрузке изображения

У меня есть привязки на странице, которая отображает другое фоновое изображение при наведении мыши и отведении мыши. Я предварительно загрузил изображения, чтобы избежать мерцания и повторного запроса изображений с сервера при наведении/отсутствии мыши. Скрипты отлично работают в IE8/FF, но Chrome ведет себя иначе. В последней версии Chrome при первом наведении курсора на якорь изображение повторно запрашивается с сервера, вызывая мерцание, почему так? Последующее наведение/отключение мыши работает нормально, мерцания нет.

Код ниже:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<style type="text/css">
body:after
{
  content: url('/images/1.png') url('/images/1a.png')
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.imageHover
{
   display:inherit;
   width:25px;
   height:50px;
   background:url('/images/1.png') no-repeat;
}

.imageOut
{
   display:inherit;
   width:25px;
   height:50px;
   background:url('/images/1a.png') no-repeat;
}
</style>

<script language="javascript" type="text/javascript">
    var oneSelected = new Image();
    var oneUnselected = new Image();

    oneSelected.src="/images/1.png";
    oneUnselected.src="/images/1a.png";

    function OnImageMouseOver(target) {
       $(target).toggleClass('imageHover', true);
       $(target).toggleClass('imageOut', false);
    }
    function OnImageMouseOut(target) {
       $(target).toggleClass('imageHover', false);
       $(target).toggleClass('imageOut', true);
    }
</script>
</head>
<body>
   <a href="#" class="imageOut" onmouseover="OnImageMouseOver(this)" onmouseout="OnImageMouseOut(this)"></a>
</body>
</html>

Преобразование привязки в изображение, но оно по-прежнему не работает в Chrome:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">    
    if (document.images) {
        var oneSelected = new Image();
        var oneUnselected = new Image();

        oneUnselected.src = '/images/1a.png';
        oneSelected.src = '/images/1.png';
    }

    function OnRatingMouseOver(target, newSrc) {
        $(target).attr('src', newSrc);
    }

    function OnRatingMouseOut(target, newSrc) {
        $(target).attr('src', newSrc);        
    }
</script>

</head>
<body>
<div id="mainDiv" style="width:400px;">
      <div id="inputDiv">
         <table id="inputTable">
            <tr>
               <td>Rating</td>
               <td>
                  <img id='rating1Anchor'
                        src='/images/1a.png'
                        onmouseover="OnRatingMouseOver(this, '/images/1.png');"
                        onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
                        onclick="OnRatingClick(this, '/images/1.png', 1);">
                  </td>
           </tr>           
         </table>
      </div> 
</div>
</body>
<html>

javascript google-chrome css preloading image-preloader
person rro    schedule 03.01.2013    source источник
comment
Это странно. Я только что попробовал его в Chrome на своем домашнем ПК, и он работает нормально (изображения не запрашиваются повторно с сервера). Кто-нибудь может пролить свет на это?   -  person rro    schedule 03.01.2013
comment
Чтобы добавить некоторый контекст, страница, которую я создаю, представляет собой веб-часть SharePoint на пользовательской странице. Похоже, что заголовки ответа изображения играют роль в поведении Chrome.   -  person rro    schedule 03.01.2013
comment
Еще немного информации: протестировано в IE9 и Opera, изображения не запрашиваются повторно. В Chrome проблема кажется прерывистой. На вновь открытой вкладке изображения повторно запрашиваются. Но при открытии новой вкладки в том же окне изображения повторно не запрашиваются. Повторное нажатие кнопки «Обновить» на новой вкладке повторно запрашивает изображения при наведении курсора мыши.   -  person rro    schedule 03.01.2013
comment
Я столкнулся с той же проблемой. Какой был результат?   -  person J. Bruni    schedule 28.03.2014
comment
Я просмотрел запросы - единственная разница в том, что во втором запросе есть файл cookie, которого нет в первом.   -  person J. Bruni    schedule 28.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

Может быть, он вообще не загружает их, так как не отображает их, а просто добавляет в DOM? Попробуйте следующий код для предварительной загрузки изображений.

var preload = new Array();

function preload_image(){
    for (var x = 0; x < preload_image.arguments.length; x++)
    {
        preload[x]     = new Image();
        preload[x].src = preload_image.arguments[x];
    }
}
person Ryan McDonough    schedule 03.01.2013
comment
Он отображает изображение, так как класс CSS привязки изначально установлен на imageOut. - person rro; 03.01.2013

arrow_upward
-1
arrow_downward

Должен сказать, что я очень сомневаюсь, что png-файлы на самом деле повторно запрашиваются с сервера в Chrome. Можете ли вы опубликовать скриншот временной шкалы в инструментах разработчика, показывающий, что запрос выполняется дважды? :) Я думаю, что гораздо более вероятно, что вы просто немного колеблетесь во время перекраски.

Есть ли причина, по которой вы не используете спрайты изображений? Они являются каноническим решением этой проблемы. Идея заключается в том, что загружается одно изображение, содержащее как нормальное, так и «наведение» или «активное» состояние. Часть показанной графики заменяется с помощью css «background-position». Вот руководство, а вот таблица поддержки для "background-position", которая восходит к IE4.

Код должен выглядеть примерно так:

<html>
<head>
    <style>

    #myCoolLink {
        background-image:url('img/image.gif');
        background-position:0px 0px;
    }
    #myCoolLink:hover,
    #myCoolLink.active {
        background-position:0px -72px; //depending of course on the image
    }
    </style>
</head>
<body>
   <a href="#" id="myCoolLink"></a>
</body>
</html>

Сценарий не требуется, и это намного короче. Другим большим преимуществом этого является то, что вы все еще можете программно изменить изображение на «наведение» в любое время, переключив «активный» класс на ссылку, если вам когда-либо понадобится.

person Ben    schedule 26.01.2013
comment
Почему минус? Хочешь объяснить? Покажите, пожалуйста, сетевую панель с запросом на двойное срабатывание одного и того же изображения :) - person Ben; 15.04.2014