предварительная загрузка javascript любых изображений, не работающих в Chrome - PullRequest
Новая
       25

предварительная загрузка javascript любых изображений, не работающих в Chrome

4 голосов
/ 21 января 2012

Я довольно новичок в веб-дизайне, я только что создал следующий веб-сайт http://www.janewaltonwatercolours.co.uk,, и, кроме нескольких незначительных ошибок, он работает во всех браузерах.

Однако в Chrome моя функция javascript для предварительной загрузки изображений не работает (помимо прочего, вызывает мерцание для изображений панели навигации), и, перепробовав все и не встретив ответов в Интернете, я постепенно схожу с ума .. ....

Вот соответствующий код: - 

var navbarImages = new Array();
preload(navbarImages,"images/navbar/topbigdrophover.gif","images/navbar/topdrophover.gif","images/navbar/tophover.gif");

function preload() {
    var images = preload.arguments[0];

    for (i = 1; i < preload.arguments.length; i++) {    
        images[i-1] = new Image();
        images[i-1].src = preload.arguments[i];
        }
    }

Это прекрасно работает для всех, кроме Chrome - есть идеи?

Любая помощь получена!

Mike

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

Таблица стилей main.css загружается при первой загрузке страницы, затем в зависимости от размера экрана загружается вторая таблица стилей в соответствии с размером экрана. Однако вторая таблица стилей не влияет на панель навигации.

Код для панели навигации в main.css: - (немного грязно, я знаю ...) 

nav {position: relative; margin: 0 auto; text-align: center; height: 35px; line-height: 35px; font-size: 16px;}

.top {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topbig {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/back.gif);color:#ccc;}

.topdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topdrop2.gif) no-repeat right top;color:#ccc;}

.topbigdropdown {float: left; text-decoration:none; font-size:16px; font-weight:bold; cursor:pointer; background: url(../images/navbar/topbigdrop.gif) no-repeat right top;color:#ccc;}

.top:hover {color:#fff; background: url(../images/navbar/tophover.gif) no-repeat right top;}

.topbig:hover {color:#fff; background: url(../images/navbar/topbighover.gif) no-repeat right top;}

.topbigdropdown:hover {color:#fff; background:url(../images/navbar/topbigdrophover.gif) no-repeat right top;}

.topdropdown:hover {color:#fff; background:url(../images/navbar/topdrophover.gif) no-repeat right top;}

Ответы [ 3 ]

6 голосов
/ 30 января 2012

Наконец исправлено!

Это не было проблемой с кодом или css, это, очевидно, известная проблема с моей версией Chrome. По сути, даже если определенные изображения / файлы кэшируются, Chrome все равно пытается выполнить запрос GET if -ified-Since с сервера. Чтобы исправить, я установил время истечения для типов файлов кэша, используя файл .htaccess, чтобы переопределить это - т.е. ExpiresByType image / jpg «доступ плюс 4 часа» http://code.google.com/p/chromium/issues/detail?id=102706

1 голос
/ 21 января 2012

Продолжение:

Я посмотрел на вашу скрипку и не могу точно сказать, в чем проблема, но заметил, что вы используете js для изменения файлов css в зависимости от размера окна.

Полагаю, это проблема.Css загружен, dom загружен, а затем запускается js, и вы видите мерцание при вызове нового css.

Вы можете решить эту проблему, используя тип носителя и медиазапросы в вашем css.cf w3.org / TR / css3-mediaqueries и stackoverflow.com/a / 996796/215752

Если вы использовали медиазапросы, тогда CSS будет определен раньшеДом загружается и не должно быть мерцания.

Может также быть ошибка только в одном из ваших размеров - с типами носителей легко заставить один для тестирования.

Я не вижу ничего плохого в вашемкод, и я не думаю, что этот код вызывает мерцание (я ожидаю, что это проблема CSS), но вот ваш код переписан с использованием более современного стиля: 

var navbarImages = [];
preload(navbarImages,
   ["images/navbar/topbigdrophover.gif",
    "images/navbar/topdrophover.gif",
    "images/navbar/tophover.gif"]);

function preload(inArray,pathList) {
  var images = inArray;

  for (index = 0; index < pathList.length; index++) {    
    images[index] = new Image();
    images[index].src = pathList[index];
  }
}

Я не вижупричина для var images = inArray (можно было бы просто использовать inArray), но я сохранил его в соответствии с вашим кодом, есть много способов написания кода с этой функциональностью.

Я предлагаю опубликовать новый вопрос, который детально описывается спроблема мерцания, связанная с Chrome, - я думаю, с некоторыми деталями вы сможете понять суть настоящей проблемы.

0 голосов
/ 21 января 2012

Вам нужно использовать arguments вместо preload.arguments для доступа к аргументам, переданным функции.

Хотя использование func.arguments должно вызывать проблемы только в строгом режиме , оно может быть полностью запрещено в Chrome.

Если fun находится в строгом режиме, то и fun.caller, и fun.arguments не являются удаляемыми свойствами, которые выдают при установке или извлечении

из https://developer.mozilla.org/en/JavaScript/Strict_mode#Making_eval_and_arguments_simpler

...