Предварительная загрузка изображения ... самый быстрый способ - PullRequest
Новая
       16

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

0 голосов
/ 07 марта 2012

Я работаю над проектом, имеющим дело с веб-страницей с большим трафиком (действительно высокой!).На целевой странице отображаются тонны изображений (~ 40), которые должны быть там, сразу после загрузки страницы, чтобы отобразить их путем постепенного появления. Мы не используем для этого никакую библиотеку, так как она должна быть загружена до того, как будет готоваиспользовать.У нас есть 4 сервера изображений.У кого-нибудь есть опыт, который является лучшим способом загрузки изображений?Я попробовал следующее:

В заголовке страницы, сразу после <head>, вставили тег сценария: 

<script>
   var img = new Image(); img.src= "src of the image";
</script>

При этом изображения начинают и заканчивают загружаться до событий DOMReady и Load,Но изображения на странице с тем же URL-адресом загружаются снова, даже если они были загружены ранее.URL-адреса одинаковые, кэширование было включено, использовалась Mozilla.

Может быть, есть какой-то механизм, который не позволяет браузеру использовать эти изображения?или что?Другой вопрос: вызывает ли это замедление, когда DOM и изображения загружаются параллельно?

1 Ответ

0 голосов
/ 07 марта 2012

Во-первых, я бы порекомендовал использовать спрайты CSS.Вы можете найти больше информации здесь:

http://www.alistapart.com/articles/sprites

Во-вторых, если вы хотите загрузить изображения в DOM ready, используйте следующее: 

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent('on' + event, func);
  }
}

listen('load', window, function() {
  var img = new Image();
  img.src= "src of the image";
});

Использование спрайтовсократит ваше время загрузки в два раза.Вы устраняете большинство ваших HTTP-запросов, и спрайт-листы сразу же кэшируются, поэтому на каждой последующей странице, которую посещает пользователь, она уже будет загружена.способ предварительной загрузки многих изображений: 

function preload(images) {
  if (document.images) {
    var imageArray = [];
    imageArray = images.split(',');
    var imageObj = new Image();
    for (var i = 0; i < imageArray.length; i += 1) {
      imageObj.src = imageArray[i];
    }
  }
}

Вызовите функцию следующим образом: 

preload('image1.jpg,image2.jpg,image3.jpg');
...