防止在封面图像涂料之前显示底部图像

Question

这可能非常简单。

我有一个图像，然后绘制一个封面图像，灰色，并有一个“？”在它上面标记。基本上，顶部图像“隐藏”底部图像，直到用户可以“刮掉”封面图像。正在发生的事情是，在刷新后面的图像（如老虎机图像）“闪烁”，提供可能是一个获胜组合。

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

这里的网格是什么的例子： “？”

Sample Grid: http://www.omnimanager.co/images/sampleGrid.png

通知，灰盖与标记....以及当页面加载时，背景图像首先显示一秒钟，然后封面图像显示提供了一个可能的“提示”。

这里的加载代码：

的BOTTOM图像的加载代码：

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)] + ')'}); 

    } 
}); 

下面的代码加载封面图像（S）的代码：

注：本代码位于document.ready函数的内部......为清晰起见，此处仅供参考。

//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") 
}); 

总之，我想在后盖图像后做后图像绘制。

就是这样。

感谢

Answer 1

一个快速和肮脏的方式做到这一点，假设盖，背面图像大小相同 - 做封面图片的影像背景，并没有设置宽度/高度为您封面图片。这些元素只会在封面图片加载后才会收到大小，并且在这一点上它们将被绘制而不是背景。

或者，您可以将背景图像设置为宽度：0，高度：0，并添加一个javascript window.onload（）处理程序来将它们的尺寸设置为auto ... onload（）处理程序将仅在所有页面上的图像已加载。

Answer 2

添加代码注释是很难或不能正常工作，所以在这里...这应该能够取代你的整个的document.ready（）代码（虽然未经测试，可能需要的调整）：

$(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); 
    }); 
});