2012-04-20 4 views
5

Что такое лучший способ предварительной загрузки изображений:Более эффективные изображения способ предварительной загрузки

$.each(['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
     '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
     '{{ MEDIA_URL }}jwplayer/player.swf'], function() { 
    $('<img/>')[0].src = this; 

или:

var preloadImages = ['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
        '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
        '{{ MEDIA_URL }}jwplayer/player.swf']; 
var imgs = []; 
for (var i=0; i<preloadImages.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].src = preloadImages[i]; 
} 

Что делает человека лучше, чем другие?

+2

Первый имеет три линии меньше. –

+0

Не можете ли вы предварительно загрузить их, указав их как img-теги в скрытом div? или это для динамически добавленных элементов или делает это с js лучшим способом? – jammypeach

+1

Хотя ответ, скорее всего, № 2 по причинам ниже, это было бы хорошим упражнением, если бы вы измерили это сами, создав два html-файла, которые используют разные методы для загрузки нескольких десятков или даже нескольких сотен изображений. Вы можете измерить это самостоятельно, используя firebug/yslow. – Moses

ответ

7

Второй лучше, чем первый, потому что это простой JavaScript по сравнению с чрезмерным вирусом jQuery.

Вы можете улучшить второе немного, установив l=preloadImages.length спереди и используя это в цикле.

+0

+1 для оптимизации как js, так и цикла – jammypeach

+0

«bloatware» немного силен jQuery в целом, но +1 тем не менее: в этом случае использование jQuery, безусловно, бессмысленно раздувается. – jimw

+0

Я согласен с тем, что включение jQuery просто для выполнения одной задачи - это слишком много, но почему вы предполагаете, что она не используется и для множества других вещей? – nnnnnn

1

Оба делают то же самое. Первый фрагмент использует jQuery, а второй - нет. Нет никаких оснований для использования jQuery исключительно для этой цели, поэтому, если вы не используете библиотеку в другом месте, перейдите со второй версией. Если вы используете jQuery на своем сайте, то сначала все в порядке.

1

Второе - быстрее. Первое - это меньше ввода (с использованием метода итератора более высокого уровня в jQuery).

Если у вас уже есть jQuery в проекте по другим причинам, то что лучше зависит от того, хотите ли вы оптимизировать скорость или размер кода.

На техническом уровне существует одна фактическая разница в реализации. Вторая версия хранит массив объектов изображения в переменной. Первый позволяет объектам изображения собирать мусор.

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