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

Я бы хотел изменить атрибут src изображений до того, как они будут запрошены браузером, целью которого является уменьшение размера изображений с помощью PHP script, например 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" />');
    });
});

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Пример:

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

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