Как закешировать изменяющийся фон div?

@Lottarend · Регистрация: 29.07.2010

Студворк — интернет-сервис помощи студентам

Такой вопрос. Если есть div, у которого в backgroundImage прописана страница asp.net, на которой формируется картинка, то как ее закешировать?
Я пробовал так:

JavaScript
1
2
3
4
5
6
                    var im = new Image();
                    im.src="WebForm2.aspx?coord="+x+"|"+y;  
                    im.onload = function ()
                    {
                        document.getElementById("Div1").style.backgroundImage = "url("+im.src+")";
                    }

Не получается ничего... картинка мигает, т.е., не кешируется. Фон обновляется по щелчку мыши, мигание не очень хорошо смотрится.
-------
При этом, если, допустим, сделать отдельный див, на который назначить mouseup, а саму картинку поставить в отдельный img, и ее кешировать, то все работает замечательно, картинка в img не мигает. Но можно же и по-нормальному сделать, а не изощряться так... можно же?

Добавлено через 9 часов 18 минут
Help, I need somebody.
Если я что-то непонятно написал, вы только скажите, все распишу как надо.
Как я понял, изображение мелькает потому, что браузеру требуется некоторое время, чтобы загрузить его, а из кэша оно берется сразу. Закэшировать надо фон дива, но не получается... а как сделать, не пойму.

@GuardCat · 02.11.2011, 17:21

Из кэша берётся сразу, и, более того, вы кешируете изображение. В вашем случае, если я верно понял, src объекта-изображения содержит динамическую ссылку на серверное приложение и вот уже ему нужно время, чтобы ответить. Что возвращает ваше приложение на asp.net? Если ссылку на картинку, то, возможно, стоит запросить ответ от вашего приложения по AJAX, например, и уже его (ответ) вписывать в src.
Совершенно не ориентируюсь в серверных технологиях, не обессудьте если моё предположение окажется неподходящим.

@Lottarend · 02.11.2011, 17:40 **[ТС]**

Спасибо за ответ.
Ох, значит, код у меня верный...
Страница возвращает закрашенный прямоугольник, который двигается по координатам. Время ответа - ну, микросекунды...
Может быть, кэшировать фон вообще не положено? Просто, когда я пробовал прописать отдельный див, с событиями мыши, и отдельно от него img, то картинка в img не мигала. Все делал точно так же:

JavaScript
1
2
3
4
5
6
 var im = new Image();
                    im.src="WebForm2.aspx?coord="+x+"|"+y;  
                    im.onload = function ()
                    {
                        document.getElementById("img1").src = im.src;
                    }

Я тут подумал, когда у дива прописывается backgroundImage, ему оформляется url("+im.src+"). В случае с img, сразу берется из кэша, а тут он, может быть, переходит по этой ссылке как обычно, и берет изображение уже не из кэша, а заново его забирает?

@GuardCat · 02.11.2011, 17:47

С точки зрения научного эксперимента... А в каком браузере тестировали? Попробуйте, та же картина в другом браузере?

@Lottarend · 02.11.2011, 17:49 **[ТС]**

Опера и FF нормально отображают. В Хроме и IE не работает.
Эх, ладно, буду думать, как тут выкрутиться...

@GuardCat · 02.11.2011, 17:58

Сообщение от Lottarend

Я тут подумал, когда у дива прописывается backgroundImage, ему оформляется url("+im.src+"). В случае с img, сразу берется из кэша, а тут он, может быть, переходит по этой ссылке как обычно, и берет изображение уже не из кэша, а заново его забирает?

Похоже на это.

@Lottarend · 04.11.2011, 08:27 **[ТС]**

С дивом у меня ничего не получилось. В связи с этим вопрос: существует ли способ запретить "перетаскивание" картинки у img? Когда зажимаешь кнопку мыши над картинкой, и двигаешь ее куда-то, картинка начинает двигаться за курсором. Если бы этого не было, мне бы не понадобилось делать фон у дива.

Добавлено через 39 минут
Или по-другому - сделать как-то див над картинкой, чтобы при движении мышью по диву картинка не перетаскивалась. Я попробовал z-index диву назначить больше, чем картинке, но картинка все равно захватывается мышью.

HTML5
1
2
3
<div>//у div большой z-index, не помогло
    <img src='...' />
</div>

Т.е., примерно так я представляю: есть div, у которого назначены события мыши. Есть img, которое будет меняться в зависимости от событий дива. Нужно, чтобы div и img были на одном и том же месте, только div "выше" img.

Добавлено через 1 час 23 минуты
Вот балбес. Подумать надо было, прежде чем опять постить.
Все получилось, хоть и смахивает на какой-то танец с бубном... раз уж фон не кэшируется, зато картинка кэшируется нормально, и теперь не тащится, т.к. она под дивом.
Тестовый пример:

JavaScript
1
2
3
4
<div class='div1'>
        <div class='div2' onmouseup='d()'></div>
        <img src="Автопортрет.jpg" width='300' height='377' />
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.div2
{
    position:absolute;
    z-index:100000;
    width:300px;
    height:377px;
    border: 6px solid green;
}
.div1
{
    position:relative;
    width:600px;
    height:600px;
    border: 4px double black;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	02.11.2011, 17:21
	Из кэша берётся сразу, и, более того, вы кешируете изображение. В вашем случае, если я верно понял, src объекта-изображения содержит динамическую ссылку на серверное приложение и вот уже ему нужно время, чтобы ответить. Что возвращает ваше приложение на asp.net? Если ссылку на картинку, то, возможно, стоит запросить ответ от вашего приложения по AJAX, например, и уже его (ответ) вписывать в src. Совершенно не ориентируюсь в серверных технологиях, не обессудьте если моё предположение окажется неподходящим. 1

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	02.11.2011, 17:47
	С точки зрения научного эксперимента... А в каком браузере тестировали? Попробуйте, та же картина в другом браузере? 0

@Lottarend 8 / 8 / 0 Регистрация: 29.07.2010 Сообщений: 47
	02.11.2011, 17:49 [ТС]
	Опера и FF нормально отображают. В Хроме и IE не работает. Эх, ладно, буду думать, как тут выкрутиться... 0