jQuery Предварительная загрузка изображения в кэш и получение исходного размера изображения перед продолжением других функций

Question

jQuery Предварительная загрузка изображения в кэш и получение исходного размера изображения перед продолжением других функций

0

Когда кто-то нажимает на миниатюру, я хочу показать реальное полноразмерное изображение в div. Я хочу знать исходный размер src (url) до загрузки изображения, потому что я могу подготовить размер div. Другие преимущества в том, что я могу позволить показ изображения медленно, а также, если изображение больше, чем обертка, я могу установить размер изображения, чтобы он соответствовал красивому.

По-моему, это шаги:

Шаг 1: Функция, загружающая изображение в кеш. Сценарий возвращается, если изображение загружается и возвращает исходные размеры.

Шаг 2: После выполнения первого шага функция номер два начинается с того, что придание назначению div правильных размеров, а также другие элементы получают размеры путем вычисления.

Шаг 3: Время показа изображения.

$('#img_full_size').show('slow');

Например, что я пробовал:

function load_and_original_size()
{
var image;

function onload() 
    {
    window.img_original_height = image.height;
    window.img_original_width = image.width;
    }

image = new Image();
image.src=array_img_src[index_of_clicked_thumbnail];

if (image.complete) 
    {
    onload();
    } 
    else 
    {
    image.onload = onload;
    }
}

Этот скрипт работает неправильно. Я также пробовал его с помощью плагинов imagesLoaded, что я использую, когда элемент уже существует. Но в этом случае я не могу найти правильный способ получить результат, который я хочу. Кто может дать мне правильный толчок?

Dinizworld 22 окт. 2013, в 17:18

Источник

0

Пожалуйста, не могли бы вы объяснить, что не работает должным образом? Какие ошибки встречались? почему вы используете глобальные переменные в функциях onload?
fcalderan 22 окт. 2013, в 15:12

Теги:

javascript

jquery

html

css

image

1 ответ

Ещё вопросы

Пожалуйста, не могли бы вы объяснить, что не работает должным образом? Какие ошибки встречались? почему вы используете глобальные переменные в функциях onload?

Kevin B · Accepted Answer · 2013-10-22T12-29-00.000Z

Перед установкой src всегда привязывайтесь к загрузке. Это также приводит к созданию более чистого кода.

function load_and_original_size() {
    var image;

    function onload() {
        window.img_original_height = image.height;
        window.img_original_width = image.width;
    }

    image = new Image();
    image.onload = onload;
    image.src = array_img_src[index_of_clicked_thumbnail];

}

Я хочу знать исходный размер src (url) до загрузки изображения, потому что я могу подготовить размер div.

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