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

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

Изображения поступают из db и динамически создаются.

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

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

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

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

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

ОТВЕТЫ

Ответ 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;​

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

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

Ответ 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.

Ответ 3

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

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

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

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

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

Ответ 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() будет ждать, пока элемент будет полностью загружен.

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

Ответ 5

Он ищет элементы с атрибутом 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);
    });
}