Random section of image to display - image

Question

I have a large image roughly 2500px wide and 300px tall. I have saved 4 versions of this image:
left side
right side
left flipped
right flipped
Images are saved as follows.
img/Banner1.png
img/Banner2.png
img/Banner3.png
img/Banner4.png
var Num;
function gen(){
var x;
x = Math.floor(Math.random()*4+1);
Num = x;
while(Num == x){
Num = Math.floor(Math.random() * 3 + 1);
}
document.write("<style type='text/css'>");
document.write(".banner{");
document.write("background-image: url('img/Banner" + Num + ".png');");
document.write("background-position:left top, left bottom;");
document.write("background-repeat:repeat-x;");
document.write("-webkit-border-top-left-radius: 50px;");
document.write("-webkit-border-top-right-radius: 50px;");
document.write("-webkit-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
document.write("-moz-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
document.write("box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
document.write("border-bottom: 3px solid #505050;");
document.write("</style>");
}
gen();
Thus far you may have noticed there is no problem however this seems somewhat in-efficient. I am wondering if anyone has a recommendation for improvement in regards to performance.

Answer 1

Your code does not use Banner4.png. That's because Math.random() does exclude the value 1, so Math.random() is in [0,1), triple that and you are in [0,3), add one to get [1,4) and take the floor and you get {1,2,3}. So make that * 4 instead of * 3.
As Kevin already mentioned in a comment, your use of x seems unmotivated and bad performance-wise. You don't seem to be using its value, so you might as well avoid the loop and write
Num = Math.floor(Math.random() * 4 + 1);
as the first line of the function. You might also combine all those document.write calls into a single one, for a slight performance gain, but I'd guess the effect should be rather negligible. The effect by omitting the loop would be negligible as well, but there it would also make the code less confusing, which is a reason why I'd suggest that modification in any case. Otherwise, don't try to optimize for performance if it reduces maintainability, unless you know for sure that you have a reason to need optimization.