JQuery для последовательной загрузки изображений и их хранения? - PullRequest
Новая
       8

JQuery для последовательной загрузки изображений и их хранения?

1 голос
/ 13 июня 2011

Я ищу простой фрагмент jquery, который будет загружать изображения в последовательности.

Итак, я использую функцию «Готов к документу», чтобы «вызвать» ее, однако не могу придумать, какк изображениям '.fadein ()' по одному в галерее.

Итак, когда DOM будет готов, IMG [1] исчезнет, ​​а затем, как только это будет сделано, IMG [2]начать исчезать. Если это имеет смысл.

Я пытался использовать функцию '.queue ()', но я просто не могу использовать ее в этом случае.

Я открыт для любых предложений по различным идеям (не jquery):)

Спасибо

-Джим

Ответы [ 5 ]

0 голосов
/ 08 мая 2012

Этот метод был бы более эффективен, чем выполнение нескольких обратных вызовов к домену.

Каждый элемент в контейнере будет постепенно исчезать

$ (document) .ready (function (){

var faders = $('#container').children().hide();
    i = 0;

function awesomeFaders() {
    $(faders[i++]).delay(500).fadeIn(2000, arguments.callee);
};
awesomeFaders();

})

источник: http://jc -designs.net / blog / 2010/06 / «больше, чем один путь к коже»-jquery /

0 голосов
/ 13 июня 2011

попробуйте это: 

    <script type="text/javascript">
    $(function() {
        $("img").hide();
        $("#1").fadeIn('slow', function() {
            $("#2").fadeIn('slow', function() {
                $("#3").fadeIn('slow', function() {
                    $("#4").fadeIn('slow', function() {
                        $("#5").fadeIn('slow');
                    });
                });
            });
        });
    });
</script>

html: 

    <div>
    <img src="img.jpg" id="1" />
    <img src="img.jpg" id="2" />
    <img src="img.jpg" id="3" />
    <img src="img.jpg" id="4" />
    <img src="img.jpg" id="5" />
</div>
0 голосов
/ 13 июня 2011

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

http://jsbin.com/ayero6

0 голосов
/ 13 июня 2011 
  $("img:first-child").fadein("fast", function () {
    $(this).next().fadein("fast", arguments.callee); 
  });
0 голосов
/ 13 июня 2011

С помощью fadein () вы также можете предоставить функцию обратного вызова, которая выполняется после завершения fadein. так что вы можете сделать что-то вроде этого: 

$('#img1').fadeIn('1000', function(){
    $('#img2').fadeIn('1000', function(){
            //go on as you like

     });
});

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

...