Стоп GIF с предварительной загрузки

Я играю с новым сайтом, который я создал несколько дней назад.
Сайт содержит много и много gifов, которые отображаются на главной странице. На данный момент отображается статичная миниатюра .png, и когда она зависает, вместо нее отображается gif.Стоп GIF с предварительной загрузки

Это в значительной степени то, что я хочу. Однако на данный момент сайт предварительно загружает каждый gif на странице, что занимает много времени, и трафик тратится впустую. Если на главной странице есть 50 gif, а каждый gif - 2 мб, это 100 мб трафика на пользователя.
Нельзя ли загружать только каждый png, а затем загружать gif, если он зависает? Я знаю, что он не будет играть в первый раз, но у меня нет большого количества веб-трафика в моем веб-отеле.

Возможно ли это с помощью какого-либо PHP или старого старого JavaScript?

Thanks

источник

2012-02-22 Filuren

Как вы выключаете png с помощью gif? CSS? Javascript? –

Как вы меняете изменения? С CSS? – cha0site

PHP - серверная, поэтому это не имеет значения. Вы хотите использовать JavaScript, который работает на стороне клиента. CSS также может работать (с событием: hover), но я не уверен, что он также предварительно загрузит изображение (достаточно легко проверить, проверив его и просмотрев журналы сервера). – Kitsune

Изменение URL-адреса изображения с помощью наведения. В этом случае с jQuery

$('#my_image').hover(function(){ 
    $('#my_image').attr('src','my.gif'); 
});

Хотите сделать его динамичным без необходимости устанавливать его на изображение? Добавьте элемент HTML5 данных:

<img src="my.png" data-gif="my.gif" />

И с JavaScript:

$('img').hover(function(){ 
    $(this).attr('src',$(this).data('gif')); 
});

источник

2012-02-22 19:53:15

Где я могу добавить jQuery и JavaScript на свою страницу? Должен ли я использовать элемент данных HTML5 для всех моих тегов ? – Filuren

используйте элемент данных для всех изображений, которые вы хотите заменить. JQuery можно поместить в любом месте, просто не забудьте включить jQuery на свой сайт –

... или лучше не использовать jQuery для простых задач, подобных этому, это накладные расходы. – Bergi

Вы можете добавить HTML, содержащий GIFs к DOM после загрузки страницы, вставив его в виде строки или с помощью AJAX.

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

источник

2012-02-22 19:54:36

Как вы используете AJAX для загрузки изображения? – Bergi

У вас нет - вы используете AJAX для захвата HTML, который содержит ссылки на изображения. –

ОК, но это, похоже, накладные расходы для коротких изображений URL ... – Bergi

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

Удалите URL-адрес изображения из вашего кода. В любом коде, который у вас есть, в настоящее время отображается скрытое изображение, вы также можете установить URL-адрес.

источник

2012-02-22 19:54:55 hvd

Являются ли имена файлов одинаковыми, за исключением расширения? Если это так, я бы рекомендовал этот подход

Stop a gif animation onload, on mouseover start the activation

Что бы вы сделали отличается заменить .png с .gif этой загрузит GIF при наведении курсора мыши, а не на странице загрузки. Сейчас звучит так, как будто вы загружаете .png и .gif в скрытый div.

Edit:

Тогда на MouseOut вы бы переключить источник обратно в .png.

источник

2012-02-22 19:55:52 Bot

Стоп GIF с предварительной загрузки

ответ

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