Можно ли изменить изображение src = "" перед загрузкой исходного изображения

Я смотрю на Javascript, который может изменить src изображения. Мне просто интересно, можно ли это сделать, прежде чем браузер попытается получить исходное изображение.Можно ли изменить изображение src = "" перед загрузкой исходного изображения

Пример.

Src="Large-Image"

Могу ли я (с JavaScript, я бы себе .. Node.js может быть?) Служить пользователю src="smaller-image"?

Очевидно, что при увеличении изображения браузер не будет увеличивать производительность.

источник

2014-10-02 David Sigley

Я смущен - вы упомянули node.js здесь, но в комментарии к ответу вы говорите, что «решение на стороне сервера не может быть и речи», что исключало бы node.js. Кажется, что у него есть немного [проблема XY] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) к нему ...Какова основная проблема, которую вы пытаетесь решить с помощью решения, о котором вы спрашиваете здесь? –

Я так не думаю, JS нуждается в том, чтобы образ-тег был доступен для доступа к атрибутам, поэтому он должен выполняться позже этого (как на документеReady или после размещения после тега), но при этом что браузер уже начал загрузку изображения.

Однако я видел решения, в которых вы не указываете URL-адрес атрибута «src», но по другому имени атрибута, например «data-src». Ваш Javascript может динамически установить этот URL-адрес атрибуту «src», чтобы побудить браузер начать загрузку.

Например (в предположении, Jquery загружается):

<img data-src="http://www.url.nl/image.png" /> 

<script> 
    $("img").each(function (index, element) { 
     var $element = $(element); 
     var imageUrl = $element.attr("data-src"); 

     //Do your checks here to change the image-url to a smaller one when required 

     $element.attr("src", imageUrl); 
    });   
</script>

источник

2014-10-02 11:02:30

Хорошо, спасибо за ваш ответ. Я пытаюсь избежать использования data-src, но если это единственный способ. –

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

Yeh, Я пытаюсь создать неинтрузивный способ повышения производительности на веб-сайте. К сожалению, вопрос о стороне сервера невозможен. –

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

Вместо того, чтобы изобретать колесо, существует несколько способов взаимодействия с клиентами и серверами, которые не полагаются на JS (который вы не можете гарантировать, будет включен). Все они были бы более надежными и соответствовали стандартам (например, для CSS-таргетинга), что даст вам лучшие результаты.

источник

2014-10-02 11:10:56

Я бы не хотел оставлять src пустым, так как это будет моим ключом к поиску замены. Поэтому, если JS не срабатывает вовремя (или вообще), исходное изображение загружается, как обычно ... Я, возможно, смогу это сделать, не могли бы вы разобраться? –

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

Значит, вы не сможете уточнить для меня? –

Простое решение, не слишком элегантное каким-либо образом. Вызовите свою функцию, чтобы изменить источник изображения с событием onload.

<img id="YourID" src="PathToFirstImage" onload="YourFunction()">

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

источник

2014-10-02 12:33:31

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

Значит, речь идет о производительности сервера, а не о пользователях браузера? – ericslaw

Если я правильно понял функцию jquery ready, ready, вы сможете добиться того, чего хотите.

«Обработчик передается .ready() гарантированно будет выполняться после того, как DOM готова, так что это, как правило, лучшее место, чтобы приложить все остальные обработчики событий и запустить другой JQuery код»

С другой hand load, говорит

«В случаях, когда код использует загруженные активы (например, если требуются размеры изображения), вместо этого код должен быть помещен в обработчик для события загрузки».

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

источник

2014-10-02 12:35:01

Это интересно. Спасибо, я рассмотрю это. Как правило, я бы не ожидал увеличения производительности от скрипта, который фактически перестает загружать страницу, но если можно быстро изменить изображения, это может сработать –

Я знаю, что jQuery очень сильно используется в наши дни, но готовность IIRC () является одной из тех областей, где существует довольно разная разница между браузерами, поэтому использование jQuery имеет смысл. Также в наши дни редко бывает, что система грамотно падает, когда javascript отсутствует. Престижность за то, что подумала об этом и приложила усилия. –

Можно ли изменить изображение src = "" перед загрузкой исходного изображения

ответ

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