Почему css не использует ресурсы, загруженные через ajax?

Question

[BanterFace]

Почему css не использует ресурсы, загруженные через ajax?
Пример. Загружаем картинку через ajax:

$.ajax({
	url: 'https://goodcafe.ga/images/123.jpg',
	type: 'GET',
	cache: false
});

после загрузки ставим загруженную картинку как фоновое изображение у div'а:

xhr: function(){
	var xhr = $.ajaxSettings.xhr();
	xhr.addEventListener('load', function(evt){
		$('div').css({background: 'url(https://goodcafe.ga/images/123.jpg)'})
	}, false);
	return xhr;
}

Но после того как мы устанавливаем атрибут background, css не использует уже загруженный ресурс, а загружает заново! Возможно, я что-то делаю не так?
Посмотреть можно здесь.

Comments

[Алексей Ярков]

> Загружаем картинку через ajax
Загружаем куда? О_о

[BanterFace]

Алексей Ярков, в смысле? Обычный get-запрос, с сервера на страницу

[Lynn «Кофеман»]

Ну так надо смотреть на заголовки кеширования.

[BanterFace]

Алексей Тен,
cache-control: public, max-age=604800
Кеширование разрешено.

Answer 1

[Arman]

у меня ваш код работает, правда через 10-15 сек.

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

Comments

[BanterFace]

у меня ваш код работает, правда через 10-15 сек.

Работает, так как должен (т.е. картинка появляется мгновенно после ajax-загрузки) или как у меня (т.е. картинка загружается постепенно опять после ajax-запроса)?

Зачем вы делаете аякс запрос на картинку?

Прелоадер.