Потяните в HTML-ресурс в фоновом режиме в JQuery

Question

На странице есть кнопка.При нажатии кнопки появляется раскрывающийся список.Раскрывающийся список содержит изображение.Проблема в том, что изображение не извлекается до тех пор, пока пользователь не нажмет кнопку.

$("#my_button").click(function(){
    $("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />"); 
});

Я бы хотел получить изображение при загрузке страницы, чтобы оно было готово к работе, когда пользователь нажимает раскрывающийся список.Как я могу это сделать?Я думал, что смогу вставить изображение на страницу с установленным display:none, чтобы оно попадало в кеш, или есть способ загрузить его, когда документ загружается в jQuery?

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

Спасибо, Кевин

Answer 1

Да. Просто определите его как новое изображение в вызове ready () страницы:

$(document).ready( function() {
     var preload = new Image();
     preload.src = "http://mysite.com/image.jpg";
});

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

Answer 2

Вы можете предварительно загрузить каждое изображение ...

$(document).ready(function() {
    (new Image()).src  =  '/path/to/myImage.jpg';
});