дождитесь загрузки изображений в фоновом режиме (css)

Question

Допустим, у нас есть слайд-шоу из фотографий. миниатюры этих изображений отображаются в div-оболочке с ползунком (который я создал с помощью Jquery), и каждое изображение включается в <li> с набором фона CSS, который, конечно же, представляет изображение. Я решил использовать фоновое изображение для макета, потому что все они различаются по размеру и соотношению сторон.

Изображения взяты из БД и создаются динамически.

Что я хочу сделать, это:

показывать «загрузочное» сообщение через каждые <li> и ждать, пока фон (изображение) загружается в кеш, а затем показывать его с fadeIn. Единственный способ, которым я могу думать (не то, что я могу, так как я не очень уверен, как и если это выполнимо):

• временно сбрасывать фон для каждого <li> при отображении сообщения «загрузка»
• сделать цикл для каждого фона, чтобы получить URL изображения
• используйте функцию $ .get для загрузки и затем делайте все, что я хочу после загрузки

Помимо выполнимой вещи, это будет означать, что они будут загружаться последовательно, поэтому, если по какой-то причине не загрузится, скрипт никогда не продолжится!

Я видел некоторые сайты, которые используют JS для загрузки изображений только тогда, когда они видны браузером, возможно, это может быть тот же случай, который я ищу, так как я использую скроллер и только часть изображений отображаются сразу и при загрузке страницы

Answer 1

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

Хитрость в том, чтобы создать новое изображение (используя объект изображения Javascript ) и убедиться, что оно загружено, но это изображение не отображается. Как только изображение будет загружено в кэш, оно будет доступно в качестве фонового изображения в вашей галерее.

Итак, все, что вам нужно сделать, это убедиться, что вы меняете фоновое изображение LI изображения только после загрузки соответствующего изображения. Изначально вы можете загрузить все LI с изображением по умолчанию «загрузка».

То есть ваш код будет выглядеть примерно так:

HTML (определения style для загрузки изображения могут быть в вашей внешней таблице стилей):

<ul>
<li id="pic1" style="background-image:url('images/loading.gif')"></li>
<li id="pic2" style="background-image:url('images/loading.gif')"></li>
<li id="pic3" style="background-image:url('images/loading.gif')"></li>
...
</ul>

Ваш jQuery / Javascript:

var img = new Array();

// The following would be in some sort of loop or array iterator:

var num = [NUMBER] // You'd use this number to keep track of multiple images.
  // You could also do this by using $("ul>li").each() and using the index #

img[num] = new Image();

  // Specify the source for the image
var imgSource = "http://yourimage.com/example.jpg";

  // only append the corresponding LI after the image is loaded
img[num].onload = function() {
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')");
};

img[num].src = imgSource;​

Вы должны будете иметь соответствующие CSS / идентификаторы и т. Д. Для каждого LI, и вам нужно будет адаптировать вышеуказанное к циклу или функции, которую вы используете для показа своей галереи.

Вот пример jsFiddle . (для тестирования это большое изображение, поэтому загрузка его занимает некоторое время).

Answer 2

Вы можете использовать трюк CSS вместо длинного кода JavaScript.
Здесь вы можете сделать это так:

HTML:

<ul id="slideshow-container">
  <li><div id="image1"></div></li>
  <li><div id="image2"></div></li>
  <li><div id="image3"></div></li>
  <li><div id="image4"></div></li>
</ul>

CSS:

#slideshow-container>li{
  background-image:url('loading.gif')
}

#slideshow-container>li>div{
  width:100%;
  height:100%;
}

#slideshow-container>li>div{
  background-color:transparent;
}

#image1{
  background-image:url('image1.jpg');
}

#image2{
  background-image:url('image2.jpg');
}

#image3{
  background-image:url('image3.jpg');
}

#image4{
  background-image:url('image4.jpg');
}

Пояснение:
Изображения слайд-шоу будут фоном div, содержащимся в li. Пока изображения не загружены, фон будет прозрачным, что будет показывать фон li, который является анимированным gif загрузки.
Проще говоря, изображение загрузки li будет отображаться до тех пор, пока не будет загружено изображение слайд-шоу, содержащееся в div.

Answer 3

Он ищет элементы с атрибутом src или свойством backgroundImage css и вызывает функцию действия при загрузке их изображений.

/**
 * Load and wait for loading images.
 */
function loadImages(images, action){
    var loaded_images = 0;
    var bad_tags = 0;        

    $(images).each(function() {
    //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display"));
        var image = new Image();
        var src = $(this).attr("src");
        var backgroundImage = $(this).css("backgroundImage");            
        // Search for css background style
        if(src == undefined && backgroundImage != "none"){
            var pattern = /url\("{0,1}([^"]*)"{0,1}\)/;                
            src = pattern.exec(backgroundImage)[1];                
        }else{
            bad_tags++;
        }
        // Load images
        $(image).load(function() {
            loaded_images++;                
            if(loaded_images == ($(images).length - bad_tags))
                action();
        })
        .attr("src", src);
    });
}

Answer 4

Решение, которое я использую из этого, состоит из двух слоев элементов.

Один слой - это случай, в котором в качестве фона используется символ загрузки фона. Это всегда видно. Затем на втором слое выше я размещаю элемент с изображениями и использую функцию jQuery .ready() с .delay() и .fade().

Потому что это запутанное объяснение, я покажу, что я делаю:

    <!-- Page Elements -->

    <div id="background-loading"> // Background image of spinner
      <div id="slider-case"> // Container of slider
        <ul id="slider-content">
          <li class="slider-image"></li>
          <li class="slider-image"></li>
          <li class="slider-image"></li>
        </ul>
      </div>
    </div>

    <!-- Script -->

  // Somewhere you have a script that manages the slider
  // Below is the loading animation/image manager
  $(document).ready(function() {
    $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ 
      $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear');
      $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){});
    });
  });

Задержка и замирание делают время загрузки преднамеренным, в то время как .ready() будет ожидать полной загрузки элемента.

Имея отдельный фоновый слой, вам не нужно беспокоиться о каких-либо манипуляциях в дополнение к ползунку. Чтобы добавить дополнительный эффект, вы можете сделать обратный вызов для загрузки изображения, который затухает при загрузке анимации.

Answer 5

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

Что вы можете сделать, это создать страницу, которая возвращает изображения, возможно, вы могли бы использовать какой-то параметр ... что-то вроде размера изображения:

http://www.mysite.com/create_image.php?size=200x100&id=img1

, тогда все, что вам нужно сделать, этопоместите этот URL в SRC тега img ... Если хотите, вы можете предварительно загрузить изображение при загрузке страницы ... или когда ваш слайдер движется

Или, может быть, я этого не сделалпонял вашу проблему = D