У меня есть определенные ссылки, при наведении курсора на них я меняю фоновое изображение <div>

JQuery, который я использовал, -

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        $(this).find('hbg').attr('title', 'my tootip info');
        });     
    }

Он работает нормально, но проблема в том, что когда я запускаю его на серверах, изображения меняются за 3-4 секунды при изменении, но во второй раз, когда я нахожу курсор мыши, изображения меняются мгновенно, я думаю, это из-за сохраненных в браузере изображений кеш. Поэтому я добавил один javascript для предварительной загрузки изображений на странице onLoad () ivent -

<script language = "JavaScript">
function preloader() 
{
heavyImage = new Image(); 
heavyImage.src = "images/soluinfo1.jpg";
heavyImage.src = "images/soluinfo2.jpg";
heavyImage.src = "images/soluinfo3.jpg";
heavyImage.src = "images/soluinfo4.jpg";
heavyImage.src = "images/soluinfo5.jpg";
heavyImage.src = "images/soluinfo6.jpg";
heavyImage.src = "images/soluinfo7.jpg";
}
</script>

<body onLoad="javascript:preloader()">

Но этот сценарий не решил мою проблему. что мне делать?

3
nectar 21 Июл 2010 в 13:41

2 ответа

Лучший ответ

Ответ @ Ричарда (спрайты), вероятно, лучший для того, что вам нужно, но причина того, что ваш код не работает, заключается в том, что в большинстве браузеров только последнему heavyImage.src="" дается достаточно времени, чтобы фактически зарегистрироваться в браузере как актуальный запрос. Вы создаете только одну настройку объекта Image и сбрасываете атрибут .src быстрее, чем браузер может запрашивать файлы (я думаю, что современные движки JavaScript делают дополнительный шаг по удалению всех промежуточных .src заявления именно из-за этого).

Есть несколько способов исправить это. Самый простой - создать несколько объектов Image, по одному для каждого изображения. И проще всего сделать это примерно так:

<script type="text/javascript">
function preloader() 
{
    function doPreload(strImagePath) 
    {
        var heavyImage = new Image();
        heavyImage.src = strImagePath;
    }

    var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"];
    for (var i = 0; i < arrImages.length; i++) {
        doPreload(arrImages[i]);
    }
}
</script>

Помещая переменную heavyImage в ее собственную функцию (не забудьте использовать ключевое слово var), вы гарантируете, что объект Image существует внутри своей собственной выделенной области.

Другой способ сделать это - прикрепить прослушиватель событий "load" к одному heavyImage. Каждый раз, когда изображение завершает загрузку, переходите к следующему изображению. Недостатком этого метода является то, что ваши изображения будут загружаться по одному (плохо для изображений навигации, но отлично подходит, скажем, для галереи изображений), тогда как первый метод будет извлекать изображения параллельно (обычно четыре за раз). .

3
Andrew 21 Июл 2010 в 15:07

Возможно, вам будет проще изменить свой подход и использовать спрайты CSS (и другая статья). Тогда у вас будет только одно изображение, и вы используете CSS, чтобы установить, какая часть этого изображения будет отображаться в каком сценарии.

Это предполагает, что изображения, которые вы используете, находятся под вашим контролем, и вы можете использовать редактор изображений, чтобы объединить их в одно большое изображение.

3
Richard Ev 21 Июл 2010 в 13:17