Я использую следующий код для вставки некоторого HTML в div и для предварительной загрузки любых изображений, которые могут содержаться в этом HTML (данные html var фактически извлекаются из запроса AJAX в реальном коде). Это сделано для того, чтобы браузер не загружал извлеченные изображения HTML при отображении div (используя событие slideDown) - потому что это приводит к нарушению плавности эффекта при загрузке изображения в середине перехода. Я полагаю, что я мог бы использовать чересстрочный JPEG, чтобы размеры изображения были известны почти сразу, но, очевидно, было бы неплохо разработать более чистый метод. : P
var html = '<img src="images/test.jpg" alt="test" />';
$('div.content').hide().html(html);
$('div.content img').each(function(){
var img = new Image();
img.src = $(this).attr('src');
$(this).attr('src', img.src);
});
$('div.content').slideDown('normal');
Я использую объект Image и его последующее назначение в соответствии с приведенным советом здесь , но, к сожалению, изображение по-прежнему не кэшируется браузером с использованием этого метода, поскольку эффект sildeDown () все еще прерывается при загрузке изображения.
Любая помощь или альтернативные методы? Большое спасибо.
Редактировать - 21 сентября 09
Прогресс! Оказывается, браузер кэшировал изображение, я просто не давал ему времени для этого (ему просто нужна была секунда для загрузки с помощью alert () или setInterval ()). Теперь представьте, что, вероятно, самый грязный код из всех, что я делал - я использую бесконечный цикл для создания этой паузы.
Новый метод расширяет старый код выше, привязывая функцию (которая добавляет src каждого изображения в массив) к успешному событию загрузки этого изображения. Затем он застревает в бесконечном цикле, ожидая, пока все изображения загрузятся и, следовательно, появятся в массиве. Кажется, это работает как способ синхронной предварительной загрузки изображений, но проблема остается; цикл while () по какой-то причине циклически повторяется даже после загрузки всех изображений, , если Я не добавлю предупреждение (), чтобы приостановить его на мгновение.
Новый код:
var html = '<img src="images/test.jpg" alt="test" />';
$('div.content').hide().html(html);
// define usr variables object
$.usrvar = {};
// array of loaded images' urls
$.usrvar.images = [];
// boolean for whether this content has images (and if we should check they are all loaded later)
$.usrvar.hasimages = false;
// foreach of any images inside the content
$('div.content img').each(function(){
// if we're here then this content has images..
$.usrvar.hasimages = true;
// set this image's src to a var
var src = $(this).attr('src');
// add this image to our images array once it has finished loading
$(this).load(function(){
$.usrvar.images.push(src);
});
// create a new image
var img = new Image();
// set our new image's src
img.src = src;
});
// avoid this code if we don't have images in the content
if ($.usrvar.hasimages != false) {
// no images are yet loaded
$.usrvar.imagesloaded = false;
// repeatedly cycle (while() loop) through all images in content (each() loop)
while ($.usrvar.imagesloaded != true) {
$('div.content img').each(function(){
// get this loop's image src
var src = $(this).attr('src');
// if this src is in our images array, it must have finished loading
if ($.usrvar.images.indexOf(src) != -1) {
// set imagesloaded to trueai
$.usrvar.imagesloaded = true;
} else {
// without the pause caused by this alert(), this loop becomes infinite?!
alert('pause');
// this image is not yet loaded, so set var to false to initiate another loop
// (ignores whether imagesloaded has been set to true by another image, because ALL
// need to be loaded
$.usrvar.imagesloaded = false;
}
});
}
}
$('div.content').slideDown('normal');