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

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

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

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

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

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

источник

2012-03-07 zak

Вы используете CDN? –

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

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

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

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-запросов, и листы спрайтов сразу же кэшируются, поэтому каждая последующая страница, которую посещает пользователь, уже загрузит ее.

EDIT

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

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');

источник

2012-03-07 15:42:00

Этот ответ не требует предварительной загрузки изображений. Спрайты - это направление, но я не понимаю, как этот ответ решает проблему предварительной загрузки. – jfriend00

Я чувствую, что у вас будет больше возможностей для пользователей, если изображения будут загружены после DOM, особенно если ваша страница сильно загружена. Когда вы предварительно загружаете, вы просите пользователя дождаться загрузки изображений, прежде чем они смогут просматривать ваш сайт. –

Почему предварительная загрузка изображений заставляет пользователя ждать дольше, чем ваш вариант? Идея предварительной загрузки изображений заключается в том, что они доступны раньше, и пользователь должен ждать меньше. HTML-страница не ждет загрузки изображений, прежде чем она будет доступна для взаимодействия с пользователем. – jfriend00

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

ответ

Смежные вопросы