一张一张地创建和显示图像作为背景图像 - JavaScript

Question

问题陈述 - 我需要从我的目录中一张一张地动态创建和显示多个图像，并对其应用变换 - 缩放（用于显示）。但是我的代码是同时显示它们。

HTML:

<div class="images-cont">       
</div>

CSS:

a {
    border-radius: 50%;
    width: 120px;
    height: 160px;
    transform: scale(0,0); 
    transition: all 4s;
    background:no-repeat center center;
    display:inline-block;
}
a.scale{ transform: scale(1,1);}

JS:

$("document").ready(function(){ 
    var minImages = 1;   // Images are numbered from 1.jpg till 10.jpg
    var maxImages = 10; 


    for(i=1;i<=maxImages;i++){
        buildImageLink();
    }

    showImages();

    function buildImageLink(){
        var anchor = $(document.createElement('a'));
        anchor.attr('href','#').appendTo('.images-cont');
        loadImage(anchor);
    };

    function loadImage(elem){
        var f = new Image;
        var p = 'images/' + i + '.jpg';  // Location of the images directory 
        f.src = p;
        f.addEventListener("load", function() {
            elem.css({ 'background-image': 'url('+ p +')'});            
        });     
    };

    function showImages(){
        $('.images-cont a').each(function(){
            $(this).delay(1000).addClass('scale')
        })
    }
});

已经浏览了 SO 本身的一些帖子，并相应地改进了我的代码，但它仍然是一样的。我不明白我在这里缺少什么。延迟并没有发生。

Answer 1

.delay()不适用于.addClass()，仅适用于动画队列

你想要的可能是一个setTimeout函数：

function showImages(){
    $('.images-cont a').each(function(i, el){ // `i` is Index, `el` is HTMLElement object
        setTimeout(function(){
             $(el).addClass('scale');
        }, i * 1000); // (0*1000=0; 1*1000=1000, 2*1000=2000 etc)
    })
}

此外，您可以：

而不是 var anchor = $(document.createElement('a'));

var anchor = $("<a />");

甚至：

var anchor = $("<a />", {href:"#"});
/* and than just: */ anchor.appendTo('.images-cont');

另外建议改一下顺序：

    f.addEventListener("load", function() {
        elem.css({ 'background-image': 'url('+ p +')'});            
    });  
    f.src = p; // After instantiating the load function

一张一张地创建和显示图像作为背景图像 - JavaScript

Create & Show images as background-image one by one - JavaScript

javascript

css

jquery

background-image

css-transforms