Как предварительно загрузить изображения с помощью PhoneGap?

Question

Я пришел, чтобы поверить, что происходят две вещи. Во-первых, если вы хотите, чтобы предварительно загрузить URL, вы можете сделать это:

body:after{ 
    content: url(http://www.example.com/img/img_1.png) display:none; 
} 

Но, насколько я знаю, это не помогает в этом случае:

body:after{ 
    content: url(../img/img_1.png) display:none; 
} 

В этом последнем случае, изображение уже локально, поэтому ему не нужно «загружать» его? Это правда? Или будет ли первый бит кеша кеша еще больше?

Я спрашиваю, потому что, хотя я делаю это, и затем я перехожу на другую страницу, используя jquery mobile, следующая страница по-прежнему занимает несколько секунд, чтобы загрузить фоновое изображение. Хотя это локальный актив.

Как мне обойти это?

Answer 1

Из тестов я сделал, кажется, что две вещи могут вызвать задержку при загрузке изображения:

1. Когда изображение должно быть загружено из URL, или
2. Когда изображение локально находится, но его необходимо разместить на экране дисплея.

Что я не понимал, так это то, что с помощью PhoneGap даже с изображениями на месте может потребоваться некоторое время для загрузки. Это то, что вызывало проблемы для меня. Ну, это и тот факт, что я загружался из URL-адресов. Так что в моем случае я использовал «CSS3 Caching Plugin» как так:

jQuery(function($) { 
    $.preload.images(document) 
}); 

Это решило мою проблему загрузки изображений, которые были в файле CSS. Но затем для моего удобства я добавил раздел в файл css для локально кэшированных файлов. Как так:

#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; } 
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; } 
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; } 
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; } 
etc 

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

Что я и делал, что, кажется, работает, в том, что я использую «InAppBrowser» плагин для предварительной загрузки целых страниц, открыв их в скрытом окне:

var ref = window.open('http://www.example.com', '_blank', 'hidden=yes'); 

Если открыть кучу файлов загрузка приложения, кажется, когда вы либо открыть эти URL-адреса снова, или перейти к окну:

ref.show(); 

Таким образом, есть два приличных способов, которые я нашел в кэш-файлы, которые отлично работает для моего сценария. Надеюсь, это поможет кому-то еще!

Answer 2

Я не знаю, если я хорошо понимал, но, возможно, это может полезно для вас:

<img src="my.png" onerror="this.src = 'image-not-found.png';" /> 

Answer 3

Когда я столкнулся с проблемами предзагрузку изображения, которые я должен был отказаться от идеи использования display:none; потому что не сделал (пока я помню, что браузер отказывается загружать содержимое невидимых элементов, чтобы ускорить загрузку страницы и уменьшить трафик). Вместо этого я создал div, который, по мнению браузера, был виден, но он имел ноль width и height. Обязательные изображения Я загружаю как background-image для этого блока. Весь трюк заключается в том, что свойство background-image может принимать несколько значений. CSS будет выглядеть так:

#preload { 
    height: 0; 
    width: 0; 
    background-image: url(image-1.png), url(image-2.png); 
} 

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

Answer 4

Вам не нужно прикреплять изображение непосредственно к DOM, поэтому нет необходимости использовать css, чтобы скрыть его. Используйте JavaScript для предварительной загрузки изображений.

var image = new Image(); 
image.src = "yourfile.jpg" 

вы можете обеспечить более длительный срок решения с использованием appcache.