Возможно ли запустить javascript до начала загрузки изображений?

Question

Я бы хотел изменить атрибут 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') + '&w=200" />');
    });
});

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

Пример:

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

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