Блог

Я хотел бы изменить атрибут src изображений до того, как они будут запрошены браузером, цель состоит в том, чтобы уменьшить размер изображений с помощью PHP-скрипта, такого как Timthumb. Я думал, что использование jQuery $(document).ready сделает свое дело:

 $(document).ready(function () {
  var imgs = $('#container img');
  jQuery.each(imgs, function() {
    $(this).replaceWith('<img src="timthumb/timthumb.php?src='   $(this).attr('src')   'amp;w=200" />');
    });
});
  

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

Загрузка и выполнение Javascript сериализуются браузером (если вы не используете что-то вроде head.js ), но проблема в том, что DOM должен быть доступен скрипту для его изменения. Событие jQuery ready срабатывает после того, как DOM доступен, поэтому браузер уже начал запрашивать ресурсы, на которые были ссылки в HTML.

Итак, если вы поместите Javascript перед тегом image, он не сможет найти теги image, и как только сработает ready, загрузка уже началась. Я не знаю ни о каких событиях, которые запускаются перед загрузкой изображения (только одно для прерываний), поэтому самый чистый метод — это создать HTML с измененными src атрибутами в первую очередь.

В качестве альтернативы, поместите src в другой атрибут изображения (например data_orig_src ) и запустите скрипт для установки src значения data_orig_src для каждого изображения по мере готовности документа. Используйте CSS, чтобы скрыть изображения перед изменением src , чтобы пользователь не видел сломанный значок изображения. Я думаю, что это, вероятно, лучше, чем добавлять изображения постфактум, потому что вам не нужно будет отслеживать, где изображения должны быть размещены в DOM, и это также должно работать лучше.

Конечно, если вы можете изменить сервер на использование data_orig_src вместо src , почему бы просто не поместить соответствующее src в тег в первую очередь…

Вы не можете изменить DOM страницы до того, как DOM был загружен. И, как только DOM был загружен, браузер уже начал запрашивать изображения. Таким образом, вы не можете изменить <img> теги до того, как они начнут загружать свои изображения.

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

Или вы могли бы изменить <img> теги, чтобы они вообще не имели .src свойства, и с помощью вашего Javascript вы бы добавили .src свойство. <img> Тег без .src свойства не будет отображаться, пока вы не предоставите ему .src свойство.

Если вы беспокоитесь о том, что неправильные изображения будут мигать при загрузке до того, как вы измените их на правильные изображения, вы можете использовать CSS в таблице стилей, чтобы изначально скрыть изображения, а затем, после того как вы измените img.src значение на правильное и это новое .src значение загрузится, вы можете сделать их видимыми.

Если вы не можете изменить исходный код страницы, то все, что вы можете сделать, это изначально скрыть изображения (используя CSS) до тех пор, пока для них не будет установлено правильное .src значение и загружено это новое .src значение.

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

Пример:

 var image = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');
  

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