Javascript 在封面图像绘制之前防止底部图像显示

这可能很简单

我有一个画画的图像，然后是一个灰色的封面图像，上面有一个“？”标记。从本质上讲，顶部图像“隐藏”底部图像，直到用户可以“刮掉”封面图像。现在的情况是，在刷新时，背面的图像（如老虎机图像）正在“闪烁”，显示可能是一个成功的组合

我有一个三乘三的网格，有9个可能的图像

下面是网格的示例：

注意，带“？”标记的灰色封面。。。。嗯，当页面加载时，背景图像首先显示一瞬间，然后封面图像显示一个可能的“提示”

以下是加载代码：

底部图像的加载代码：

var images = ['slide1.jpg', 'slide2.jpg', 'slide3.jpg',
    'slide4.jpg', 'slide5.jpg', 'slide6.jpg',
    'slide7.jpg', 'slide8.jpg', 'slide9.jpg'];

$(document).ready(function() {

    //Scratch pad randomizer
    for (var i = 1; i < 10; i++)
    {

        $('#wScratchPad3-' + i).css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

    }
});

总之，我想在封面图像之后绘制背面图像

差不多就是这样

---

感谢您提供了一种快速而肮脏的方法，假设封面和背面图像大小相同，请将背面图像设置为封面图像的背景，不要为封面图像设置宽度/高度。元素只有在封面图像加载后才会收到一个大小，此时将绘制它们而不是它们的背景

---

或者，您可以将背景图像设置为宽度：0，高度：0，并添加一个javascript window.onload（）处理程序，将其尺寸设置为自动。。。onload（）处理程序只会在页面上的所有图像加载完毕后启动。

将代码添加到注释很困难或不起作用，因此这里。。。这应该能够替换整个document.ready（）代码（尽管未经测试，可能需要调整）：

---

遍历DOM的代价很高，因此尽可能地缓存选择器（将$（“#wScratchPad3-1”）的副本保存到变量，而不是调用它两次）。这使浏览器不必多次“查找”同一元素。此外，请尽量保持代码干燥（不要重复）。很明显，您已经复制并粘贴了9次相同的代码块，每次都做了一些小的更改。。。不要这样做：）[code]$（'.pads'）.each（函数（i，pad）{pad.css（{'background-image'：'url（images/'+images[Math.floor（Math.random（）*images.length）]+'））}.wScratchPad（{//options-i是循环的迭代器}）；}）；[/code]这看起来不错。。。只有一个问题。这个。垫子。。。你在这里指的是什么？你会为这个问题选择答案吗？

//Scratch off monitoring
$("#wScratchPad3-1").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {

        if (percent >= 60)
        {
            percentCmplt[0] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[0] = Math.round(percent);
        }

    },
    backImage1: $("#wScratchPad3-1").css("background-image")
});
$("#wScratchPad3-2").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[1] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[1] = Math.round(percent);
        }
    },
    backImage2: $("#wScratchPad3-2").css("background-image")
});
$("#wScratchPad3-3").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[2] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[2] = Math.round(percent);
        }
    },
    backImage3: $("#wScratchPad3-3").css("background-image")
});
$("#wScratchPad3-4").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[3] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[3] = Math.round(percent);
        }
    },
    backImage4: $("#wScratchPad3-4").css("background-image")
});
$("#wScratchPad3-5").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[4] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[4] = Math.round(percent);
        }
    },
    backImage5: $("#wScratchPad3-5").css("background-image")
});
$("#wScratchPad3-6").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[5] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[5] = Math.round(percent);
        }
    },
    backImage6: $("#wScratchPad3-6").css("background-image")
});
$("#wScratchPad3-7").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[6] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[6] = Math.round(percent);
        }
    },
    backImage7: $("#wScratchPad3-7").css("background-image")
});
$("#wScratchPad3-8").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[7] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[7] = Math.round(percent);
        }
    },
    backImage8: $("#wScratchPad3-8").css("background-image")
});
$("#wScratchPad3-9").wScratchPad({
    cursor: 'cursors/coin.png',
    scratchMove: function(e, percent)
    {
        if (percent >= 60)
        {
            percentCmplt[8] = 100;
            this.clear();
            winner();
        } else {
            percentCmplt[8] = Math.round(percent);
        }
    },
    backImage9: $("#wScratchPad3-9").css("background-image")
});

$(function(){ //same as document.ready() but shorter
    $('.pads').each(function(i, pad){
        var settings = {
            cursor: 'cursors/coin.png',
            scratchMove: function(e, percent)
            {

                if (percent >= 60)
                {
                    percentCmplt[i] = 100;
                    this.clear();
                    winner();
                } else {
                    percentCmplt[i] = Math.round(percent);
                }

            }
        };

        settings["backImage" + (i + 1)] = pad.css("background-image");

        pad
          .css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'})
          .wScratchPad(settings);
    });
});