Jquery затухает элементы один за другим и удаляет последний элемент, если превышен лимит - PullRequest
Новая
       10

Jquery затухает элементы один за другим и удаляет последний элемент, если превышен лимит

0 голосов
/ 19 января 2012

Вопрос 1: Я хочу добавить каждый тег href или img, поскольку они загружаются с задержкой, поэтому выглядит так, как будто они загружаются отдельно.Я не знаю, какой использовать, delay(), fadeToggle() или fadeIn() `

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

 $(document).ready(function(){
        var existingElements= new Array(); // array of existing images

        setInterval(function(){
            $.get("/helloworld", function(data){
                data = $.parseJSON(data);

                for(i = 0; i < data.length; i++){
                    if($.inArray(data[i]["id"], existingElements) == -1){



                       var imagelinks = '<a class="removethis" href="link">'
                       +'<img src="'+data[i]["img"]+'"/>   </a>';

                       $(imagelinks).prependTo("#somediv").delay(300);


                       existingElements.push(data[i]["id"]);


                        }

 /// add limit here, see below
                    }
                });
            }, 20000);
        });

Вопрос 2: В div somediv может быть не более 20 изображений.поэтому, если json вводит более 20 (превышающих) изображений.я хочу удалить последние установленные изображения, так как приведенный выше код будет всегда вводить новые изображения через 20 секунд, если я установлю ограничение следующим образом: 

 if(i > 20){
$("#somediv .removethis:last").fadeOut(); // should i use remove()

}

1 Ответ

1 голос
/ 19 января 2012

Примерно так должно поступить: 

var existingElements = {};
var somediv = $("#somediv");

(function loopy() {
    $.get("/helloworld", function(data) {
        data = $.parseJSON(data);
        var imagelinks = [];
        for (i = 0; i < data.length; i++) {
            if (!existingElements[data[i]["id"]]) {
                imagelinks.push('<a class="removethis" href="link">' + '<img src="' + data[i]["img"] + '"/></a>');
                existingElements[data[i]["id"]] = data;
            }
        }
        // Add then all to the dom at once, hide them
        //then find that last one and start fading in.
        $(imagelinks.join('')).prependTo(somediv).hide().filter(":last").fadeIn("slow", fadeNext);
        setTimeout(loopy, 20000);
    });
})();

function fadeNext() {
    // Fade the next image in
    $(this).prev().fadeIn(fadeNext);
    //If there are more than 20 images visible fade the others out
    var more = somediv.find("img:visible:not(:animated):gt(20)");
    if (more.length) {
        more.fadeOut("slow", function() {
            $(this).remove();
        });
    }
}
...