创建,显示图像作为背景图像一个接一个- JavaScript

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

本文关键字：一个 图像 JavaScript 背景 显示 显示图 创建      更新时间：2023-09-26

问题说明 -我需要创建&动态显示多个图像从我的目录一个接一个，与转换-比例(显示)应用到它。但是我的代码会同时显示它们。

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本身经历了一些帖子，并相应地改进了我的代码，但它仍然是一样的。我不明白我错过了什么。延迟是不会发生的

.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
相关文章：