Предварительная загрузка изображений перед загрузкой веб-страницы

Question

это мой 1-й вопрос здесь, так что извините, если что-то спросили неправильно :) Я хочу предварительно загрузить 3 изображения до загрузки веб-страницы, чтобы все они появлялись в один и тот же момент.Прямо сейчас изображения загружаются один за другим, и это выглядит немного изменчиво.Одно изображение определено в css (), два других - простой простой элемент «img».Я пытался создать объекты изображений javascript - изображения по-прежнему загружаются прерывисто, пытался предварительно загрузить их на дисплей: нет;div - все еще изменчивыйЧто мне делать?

Спасибо.

Answer 1

Самым простым решением, вероятно, является отображение загрузочного GIF для всех трех изображений до тех пор, пока все они не будут загружены, а затем заменить GIF фактическим изображением.

Answer 2

Это работает: (попробуйте здесь: http://dl.dropbox.com/u/186012/demos/loadatonce/index.html)

<!-- jQuery is required -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- the images -->
<div class="showmetoo" style="background: url(jimhance-vader_inset.jpg)">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>

<img class="showall" src="octopus3.jpg" alt="a picture"><br/>
<img class="showall" src="moorea.jpg" alt="a picture"><br/>

<!-- hidden by default -->
<style>
img.showall { visibility: hidden }
div.showmetoo { visibility: hidden }
</style>



<!-- the script -->
<script type="text/javascript">
var remaining = $('.showall').length;

function showthem(){
  remaining--;
  if(!remaining){
    $('.showall').css('visibility', 'visible');
    $('.showmetoo').css('visibility', 'visible');
  }
}

// bind the callback to the load event of the pictures.
$('.showall').bind('load',showthem);

// force the pictures to show (just in case)
setTimeout(showthem, 1000);  //just in case load event fires before callback is set.
</script>

Answer 3

Одним из простых решений является использование URI данных http://css -tricks.com / data-uris /

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

Я думаю, что, вероятно, следует исправитьit.

URI данных имеют некоторые ограничения в отношении IE, но я думаю, что в этом случае вы должны просто назвать это постепенной деградацией.:)

Редактировать: Я видел ваше упоминание дисплей: нет divs.Отображение non divs НЕ будет предварительно загружать ваши изображения.Вам нужно настроить отображение, чтобы блокировать и скрывать div другим способом.Установка z-index или смещения -9999 или чего-то подобного.