2011-06-14 69 views
-6

我有一个页面,有很多事情要做,当它完成加载它看起来不错,但我想要它加载所有的图像等,然后显示页面?可能是另一种解决方法。延迟显示页面,直到一切都加载

http://www.randykrohn.com/gallery/pictures.php?EventID=279

这里是代码的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Primary.dwt.php" codeOutsideHTMLIsLocked="false" --> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>Dragboats.com - Photo Gallery -</title> 
<!-- InstanceEndEditable --> 
<script type="text/javascript" src="../includes/CSSMenuWriter/cssmw/menu.js"></script> 
<link href="../includes/CSSMenuWriter/cssmw/menu.css" rel="stylesheet" type="text/css" /> 
<!--[if lte IE 6]> 
<link rel="stylesheet" type="text/css" media="all" href="/includes/CSSMenuWriter/cssmw/menu_ie.css" /> 
<![endif]--> 
<style type="text/css" media="all"> 
<!-- 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
} 

body { 
    background-color: #FEFD8F; 
    color: #000; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    line-height: 14px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    text-align: center; 
    background-image: url(http://<?php echo $_SERVER['SERVER_NAME']; ?>/images/main_back.png); 
    background-repeat: repeat-x; 
} 

h1 { 
    color: #FEFD8F; 
    background-color:#FF6600; 
    margin: 0px 0px 0px 10px; 
    font-size: 12px; 
    font-weight: bold; 
    line-height: 20px; 
    text-transform:uppercase; 
} 

h2 { 
    padding-top: 7px; 
    margin: 0px 0px 0px 10px; 
    color: #FEFD8F; 
    font-size: 12px; 
    font-weight: bold; 
} 

a, a:link { 
    color: #000; 
    font-weight: bold; 
    text-decoration: none; 
} 

a:visited { 
    color:#5E2F00; 
    font-weight: bold; 
    text-decoration: none; 
} 

a:hover { 
    color: #fe6d00; 
    text-decoration: none; 
} 

a:focus { 
    color: #fe6d00; 
} 

a:active { 
    color: #fe6d00; 
} 

#outerWrapper { 
    margin: 0 auto 0 auto; 
    max-width: 1024px; 
    min-width: 1024px; 
    text-align: left; 
    width: 1024px; 
} 
#outerWrapper #header { 
    font-size: 14px; 
    font-weight: bold; 
    padding: 0px 0px 0px 0px; 
} 
#outerWrapper #header img { 
    float: left; 
} 

#outerWrapper #contentWrapper .clearFloat { 
    clear: both; 
    display: block; 
} 
#outerWrapper #footer { 
    padding: 11px 0px 0px 0px; 
    width: 1024px; 
    height: 52px; 
    background-image:url(http://<?php echo $_SERVER['SERVER_NAME']; ?>/images/footer.png); 
    background-repeat:no-repeat; 
    text-align:center; 
} 

hr { 
    width: 95%; 
    height: 2px; 
    padding-top: 2px; 
    padding-left: 10px; 
    padding-bottom: 2px; 
} 
#navbarWrapper { 
    display: block; 
    width: 1024px; 
    height: 30px; 
    clear: both; 
    margin: 0px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */ 
    padding: 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */ 
    background-image: url(http://<?php echo $_SERVER['SERVER_NAME']; ?>/includes/CSSMenuWriter/cssmw_images/bg.png); 
    background-repeat: repeat-x; 
    background-position: left top; 
    } 
--> 
</style> 
<style type="text/css" media="print"> 
<!-- 

body { 
    background-color: #fff; 
    background-image: none; 
    border-color: #000; 
    color: #000; 
} 
--> 
</style> 
<!--[if IE 5]> 
<style type="text/css"> 
#outerWrapper #contentWrapper #leftColumn1 { 
    width: 170px; 
} 
#outerWrapper #contentWrapper #rightColumn1 { 
    width: 170px; 
} 
</style> 
<![endif]--> 
<!--[if IE]> 
<style type="text/css"> 
#outerWrapper #contentWrapper #content { 
    zoom: 1; 
} 
</style> 
<![endif]--> 
<!-- InstanceBeginEditable name="head" --> 
<title>Dragboats.com - Photo Gallery - <?php echo $pageTitle; ?></title> 
<link rel="stylesheet" type="text/css" href="../includes/styles/full.css"/> 
<link rel="stylesheet" type="text/css" href="../includes/styles/main.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="../includes/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" href="../includes/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="../includes/jcarousel/lib/jquery.jcarousel.min.js"></script> 
<link rel="stylesheet" href="../includes/jcarousel/skins/tango/skin.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="../includes/UI/js/jquery-ui-1.8.7.custom.min.js"></script> 
<link type="text/css" href="../includes/UI/css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
<style type="text/css" media="screen"> 
<!-- 
#specItems { margin:0 15px 0 15px; padding:0; overflow:auto; color:#222; background:#fff;} 
#specItems ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} 
#specItems ul li {display:table-cell; padding:0 3px; background:#fff; vertical-align:top;} 
#specItems ul li div { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px 5px 5px 8px; 
    border: thin solid #FF6D00; 
} 
#specItems ul li div p {margin:2px 4px 0 0; padding:0; font-size:11px; color: #000; font-weight: bold; text-align: center; } 

#sizes { margin:0 15px 0 15px; padding:0; overflow:auto; color:#222; background:#fff;} 
#sizes ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;} 
#sizes ul li {display:table-cell; padding:0 3px; background:#fff; vertical-align:top;} 
#sizes ul li div { border: thin solid #FF6D00;} 
#sizes ul li div p {margin:2px 4px 0 0; padding:0; font-size:11px; color: #F00; font-weight: bold; text-align: right; } 
#sizes ul li .heading { text-align: center; font-weight: bold; font-size: 12px; border-color: #FFF;} 

#tip7-title { text-align: left; } 

#tip7-title b { display: block; margin-right: 80px; } 

#tip7-title span { float: right; } 

.pictureThumb { 
    float: right; 
} 
.thumbWrapper p { 
    width: 130px; 
} 
.thumbWrapper { 
    width: 140px; 
    text-align: left; 
} 
.comment { 
    background: #F3F3C1 url(../../images/comment_grad.gif) repeat-x; 
    background-position: 0 0; 
    margin: 0 0 0 273px; 
    padding: 10px; 
    border: 1px #999966 solid; 
    border-bottom: none; 
    font-size: 12px; 
    width: 458px; 
} 

.comment-footer { 
    background: url(../../images/comment_footer2.gif) no-repeat; 
    background-position: 0 0; 
    margin: 0 0 0 273px; 
    padding: 5px 0 0 38px; 
    width: 483px; 
    height: 35px; 
    font-size: 11px; 
} 
.feature_comment-footer { 
     background: url(../../images/feature_comment_footer2.gif) no-repeat; 
     background-position: 0 0; 
     margin: 0 0 0 273px; 
     padding: 5px 0 0 38px;  
     width: 483px; 
     height: 35px; 
     font-size: 11px; 
} 
.posterInfo { 
    margin: 0 0 0 0; 
    font-weight: bold; 
    line-height: 20px; 
    color: #F60; 
    font-style: italic; 
} 
.buttonHolder { 
    width: 760px; 
    text-align: right; 
    display: block; 
    clear: both; 
    margin-bottom: 10px; 
    font-size: 9px; 
} 
.buttonHolder img { 
    vertical-align: text-top; 
} 
--> 
</style> 
<script> 
function fbs_click(u, t) { 
    window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436'); 
    return false;} 

//function formatTitle(title, currentArray, currentIndex, currentOpts) { 
// var titleSplit = title.split("~~"); 
// var pathSplit = titleSplit[0].split("_"); 
// return '<div id="tip7-title"><span><img src="../images/photo_comment.png" border="none" alt="Comment on this photo"/><a href="javascript:;" onclick="return fbs_click(\'http://<?php echo $_SERVER['SERVER_NAME']; ?>/gallery/picture.php?imgID=' + titleSplit[0] + '\', \'Dragboats.com Photo\')"><img src="../images/facebook_l.jpg" border="none" /></a><a href="javascript:;" onclick="addToCart(\'' + titleSplit[0] + '\')"><img src="../images/addToList.jpg" border="none" class="addToCart" alt="Add This Image To Your Cart"/></a></span>' + (titleSplit[1] && titleSplit[1].length ? '<b>' + titleSplit[1] + '</b>' : '') + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>'; 
//} 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     //easing: 'BounceEaseOut', 
     scroll: 6, 
     animation: 800 
    }) 

    //$('.infiniteCarousel').infiniteCarousel(); 

    $("a.pictureThumb").fancybox({ 
     'type' : 'image', 
     'padding' : '4', 
     'overlayColor': '#000000', 
     'width': 810, 
     'height': 535, 
     //'titlePosition' : 'outside', 
     //'titleFormat'  : formatTitle, 
     //'autoScale'  : true, 
     //'autoDimension' : true, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : true, 
     'hideOnContentClick': false 
    }); 
    $("a.calendar_sample").fancybox({ 
     'type' : 'iframe', 
     'width' : 840, 
     'height' : 640, 
     'overlayColor': '#000000', 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'autoDimensions' : 'true', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : false, 
     'hideOnContentClick': false, 
     'centerOnScroll': true 
     //'onClosed': function() { parent.location.reload(true); ; } 
    }); 
    $("a.keychain_sample").fancybox({ 
     'type' : 'iframe', 
     'width' : 660, 
     'height' : 560, 
     'overlayColor': '#000000', 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'autoDimensions' : 'true', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : false, 
     'hideOnContentClick': false, 
     'centerOnScroll': true 
     //'onClosed': function() { parent.location.reload(true); ; } 
    }); 
    $("a.vertcal_sample").fancybox({ 
     'type' : 'iframe', 
     'width' : 445, 
     'height' : 740, 
     'overlayColor': '#000000', 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'autoDimensions' : 'true', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : false, 
     'hideOnContentClick': false, 
     'centerOnScroll': true 
     //'onClosed': function() { parent.location.reload(true); ; } 
    }); 
    $("a.pictureComment").fancybox({ 
     'type' : 'iframe', 
     'width': 400, 
     'height' : 280, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'overlayColor': '#000000', 
     'autoDimensions' : 'false', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : false, 
     'hideOnContentClick': false, 
     'centerOnScroll': true, 
     'onClosed': function() { parent.location.reload(true); } 
    }); 
    $("a.addToCart").fancybox({ 
     'type' : 'iframe', 
     'width': 830, 
     'height' : 520, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'overlayColor': '#000000', 
     'autoDimensions' : 'false', 
     'speedIn'  : 300, 
     'speedOut'  : 200, 
     'hideOnOverlayClick' : false, 
     'hideOnContentClick': false, 
     'centerOnScroll': true 
     //'onClosed': function() { parent.location.reload(true); ; } 
    }); 
    $(".showComment.hidden").live('click', function() { 
     //alert(this.id); 
     //var adID = this.id.split('_'); 
     if($('#Comments').is(":visible")) { 
      $('#Comments').fadeOut(600); 
     } 
     $.ajax({ 
      type: "POST", 
      url: "../gallery/comments.php", 
      data: "ID="+ this.id, 
      success: function(r){ 
      //alert(r); 
      //var allCommentInfo = r.split('_'); 
      var commentsHolder = 'Comments'; 
      var eachComment = r.split("**"); 
      var commentContainer = ''; 
      arLen = eachComment.length; 
      //alert(arLen); 
      if(arLen > 1){ 
      var commentDetails = new Array(); 
      commentContainer += '<div class="buttonHolder"><p><span id="comments-hide" style="cursor: pointer">CLOSE COMMENTS <img src="../images/close.png" title="Close Comments"></span></p></div>'; 
      for (var i=0; i<(arLen - 1); i++){ 
       commentDetails = eachComment[i].split("~"); 
       //alert(i); 
       commentContainer += '<div class="comment">'; 
       commentContainer += "<p>" + commentDetails[2] + '</p></div>';    
       commentContainer += "<div class='comment-footer'>"; 
       commentContainer += '<div><p><span class="posterInfo">(Posted By: ' + commentDetails[0] + ') - </span>' + commentDetails[1] + '</p></div></div></div>' 

      } 
     if($('#Comments').is(":visible")) { 
      $('#Comments').fadeOut(600, function() { 
       $("#Comments").html(commentContainer); 
       $("#Comments").slideDown(600, function() { 
      $("#Comments").fadeIn(600); 
      }); 
      }); 

     } else { 
     $("#" + commentsHolder).html(commentContainer); 
     $("#" + commentsHolder).slideDown(600); 
     } 
     //alert("#" + allCommentInfo[0] + "ReadText_" + allCommentInfo[1]) 
      } 
     } 
//End Ajax Callback 
}); 
//$(this).removeClass('hidden').addClass('shown'); 
//End Main Callback 
}); 
//End Document Ready 
$('#comments-hide').live('click', function(){ 
    $("#Comments").slideUp(600); 
    }); 
}); 
</script> 
<!-- InstanceEndEditable --> 
</head> 
<body> 
<!-- InstanceBeginEditable name="Tooltip" --> 

<!-- InstanceEndEditable --> 
<div id="outerWrapper"> 
    <div id="header"> 
<img src="../images/r1c1.jpg" alt="" width="312" height="73" /><img src="../images/r1c2.jpg" alt="" width="397" height="73" /><img src="../images/r1c3.jpg" alt="" width="315" height="73" /> 
<img src="../images/r2c1.jpg" alt="" width="312" height="69" /><img src="../images/r2c2.jpg" alt="" width="397" height="69" /><img src="../images/r2c3.jpg" alt="" width="315" height="69" /> 
</div> 
    <div id="navbarWrapper"> 
    <?php require_once($_SERVER['DOCUMENT_ROOT'] . "/includes/CSSMenuWriter/cssmw/menu.php"); ?> 
</div> 
<!-- InstanceBeginEditable name="Content Area" --> 
<div id="ContentHeader"></div> 
<div id="contentWrapper"> 
    <div id="leftColumn1"> 
    <div class="columnHeadings"> 
     <h2>Photo Gallery Images - <?php echo $pageTitle; ?></h2> 
     </div> 
    <div class="fullWidthDiv">Below is a set of images from the gallery you chose. To see additional images, click on the links at the bottom of this section to select the next group of images.</div> 
    <div class="infiniteCarousel"> 
    <div class="wrap"> 
     <ul id="mycarousel" class="jcarousel-skin-tango"> 
      <?php 
     do { ?> 
      <li> 
      <div class="thumbWrapper"><a class="pictureThumb" href="picture.php?imgID=<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y"> 
       <img src="../images/gallery/<?php $raceYear = explode('_', $row_rsPictures['EventOverlay']); echo $raceYear[0]; ?>/<?php echo $row_rsPictures['EventOverlay']; ?>/thumb/<?php echo $row_rsPictures['PictureFile']; ?>.jpg" alt="FileName: <?php echo $row_rsPictures['PictureFile'];?>"></a><br /> 
<p> 
<?php 
if($row_rsPictures['TotalComments'] > 0){ 
    if($row_rsPictures['TotalComments'] < 9){ 
    $commentCount = $row_rsPictures['TotalComments']; 
     } else { 
     $commentCount = "More"; 
     } 
echo '<img src="../images/view_comment'.$commentCount.'.png" id="Comment_'.$row_rsPictures['PictureID'].'" width="33" height="25" title="View Comments" alt="View Photo Comments" class="showComment hidden" style="cursor: pointer"/>'; 
} ?> 
<a class="pictureComment" href="postComment.php?imgID=<?php echo $row_rsPictures['PictureID']; ?>&rf=gallery"><img src="../images/photo_comment.png" width="33" height="25" title="Comment On This Photo" alt="Comment On This Photo" /></a><a class="facebookShare" rel="nofollow" href="#" class="fb_share_button" onclick="return fbs_click('http://<?php echo $_SERVER['SERVER_NAME']; ?>/gallery/picture.php?imgID=<?php $pieces = explode('_', $row_rsPictures['PictureFile']); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>', 'Dragboats.com Photo Gallery')" target="_blank" style="text-decoration:none;"><img src="../images/facebook.png" width="24" height="25" title="Share on Facebook" alt="Share on Facebook" /></a><a class="addToCart" href="adToCart.php?imgID=<?php echo $row_rsPictures['PictureFile'].'&dbID='.$row_rsPictures['PictureID']; ?>"><img src="../images/addToList.png" width="35" height="25" title="Add To Shopping List" alt="Add To Shopping List" /></a></p> 
      </div> 
      </li> 
      <?php 
      } while ($row_rsPictures = mysql_fetch_assoc($rsPictures)); 
      mysql_data_seek($rsPictures, 0); 
      ?> 
     </ul> 
     </div> 
    </div> 
    <div id="Comments" style="display: none"></div> 
    <div style="text-align: center; padding-right: 15px; font-size: 10px">Gallery Image Sets: <?php 
$TFM_Previous = $pageNum_rsPictures - 10; 
if ($TFM_Previous >= 0) { 
    printf('...<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_Previous, $queryString_rsPictures.'">'); 
    echo "[Previous "."10"." sets] </a>..."; 
    //Basic-UltraDev Previous X pages SB 
} 
?> 
    <?php 
for ($i = $TFM_startLink; $i <= $TFM_endLink; $i++) { 
    $TFM_LimitPageEndCount = $i -1; 
    if($TFM_LimitPageEndCount != $pageNum_rsPictures) { 
    printf('<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_LimitPageEndCount, $queryString_rsPictures.' " class="pageLinkInActive">'); 
    echo "$i</a>"; 
    }else{ 
    echo "<span class='pageLinkActive'>$i</span>"; 
    } 
if($i != $TFM_endLink) echo(" ");} 
?> 
    <?php 
$TFM_Next = $pageNum_rsPictures + 10; 
$TFM_Last = $totalPages_rsPictures+1; 
if ($TFM_Next - 1 < $totalPages_rsPictures) { 
    printf('...<a href="'."%s?pageNum_rsPictures=%d%s", $currentPage, $TFM_Next, $queryString_rsPictures.'">'); 
    echo "[Next "."10"." of ".$TFM_Last." sets] </a>..."; 
} 
?> 
</div> 
    <div class="columnFooters"> </div> 
    <div class="columnHeadings"> 
     <h2>available print sizes</h2> 
     </div> 
    <div id="sizes"><ul> 
     <li><div style="height: 120px; width: 180px;"><p>20x30<br />$65/ea</p></div></li> 
     <li><div style="height: 96px; width: 120px;"><p>16x20<br />$45/ea</p></div></li> 
     <li><div style="height: 78px; width: 114px;"><p>13x19<br />$40/ea</p></div></li> 
     <li><div style="height: 72px; width: 108px;"><p>12x18<br />$30/ea</p></div></li> 
     <li><div style="height: 66px; width: 84px;"><p>11x14<br />$25/ea</p></div></li> 
     <li><div style="height: 48px; width: 60px;"><p>8x10<br />$15/ea</p></div></li> 
     <li><div style="height: 30px; width: 42px;"><p style="font-size: 10px; line-height: 9px;">5x7<br />$10/ea</p></div></li> 
     <li><div style="height: 24px; width: 36px;"><p style="font-size: 10px; line-height: 9px;">4x6<br />$5/ea</p></div></li> 
     </ul></div> 
    <div class="columnFooters"></div> 
    <div class="columnHeadings"> 
     <h2>SPECIALTY ITEMS</h2> 
     </div> 
    <div class="fullWidthDiv">Click on the icon to see a sample and additional information or volume discounts</div> 
<div id="specItems"><ul> 
     <li><div><p>Digital File<br><img src="../images/gallery/digital_file.jpg" alt="Digital File" width="100" height="100" /><br> 
     $125/ea</p></div></li> 
     <li><div><p>Keychains<br /> 
      <a class="keychain_sample" href="keychainSample.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>"><img src="keychain.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5];; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" border="0"></a><br>$5/ea</p></div></li> 
     <li> 
     <div><p>Vertical<br />Calendars<br /> 
      <a class="vertcal_sample" href="vertCalender_sample.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>"><img src="vertCalender.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" border="0"></a><br>$35/ea</p></div></li> 
      <li> 
     <div><p>Wide<br />Calendars<br /><a class="calendar_sample" href="calender.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>"><img src="calenderSample.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5]; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" border="0"></a><br>$35/ea</p></div></li> 
     <li><div><p>Mousepads<br /><img src="mousepad.php?imgID=<?php $pieces = explode('_', $sampleFile); echo $pieces[0]."_".$pieces[1]."_".$pieces[2]; if ($pieces[3] == "NN"){ echo "_NN_".$pieces[4]."_".$pieces[5];; } else { echo "_".$pieces[3]."_".$pieces[4]; } ?>&thumb=Y" border="0"><br>$17.50/ea</p></div></li> 
</ul> 
</div> 
    <div class="columnFooters"></div> 
    </div>  
    <br class="clearFloat" /> 
</div> 
<!-- InstanceEndEditable --> 
<div id="ContentFooter"></div> 
<div id="footer"><a href="http://<?php echo $_SERVER['SERVER_NAME']; ?>/<?php if(isset($_SESSION['svUserID'])) { echo "logout"; } else { echo "login"; } ?>.php"><?php if(isset($_SESSION['svUserID'])) { echo "LOGOUT"; } else { echo "LOGIN"; } ?></a> || <a href="http://<?php echo $_SERVER['SERVER_NAME']; ?>">HOME</a> || <a href="../classifieds/main.php">CLASSIFIEDS</a> || <a href="../cart/view_cart.php">CART</a> || <a href="main.php">PICTURES</a> || <a href="../merch/main.php">MERCHANDISE</a> || <a href="../video/main.php">VIDEOS</a> || <a href="../video">SCHEDULES</a> || <a href="../results.php">RESULTS</a> || <a href="../downloads.php">DOWNLOADS</a> || <a href="../rides/main.php">RIDES</a> || <a href="../rides">SERVICES</a> || <a href="../contact.php">CONTACT US</a><br /> 
SITE CREATED AND MAINTAINED BY <a href="http://www.finishline-productions.com" target="_blank">FINISHLINE PRODUCTIONS</a> - COPYRIGHT 1997 - <?php echo date("Y"); ?> - <a href="../docs/privacy.php">PRIVACY POLICY</a> - <a href="../docs/usage.php">TERMS OF USE</a> - <a href="../docs/returns.php">RETURN POLICY</a></div> 
</div> 
</body> 
<!-- InstanceEnd --></html> 
</html> 
<?php 
mysql_free_result($rsPictures); 
?> 

感谢您的帮助!

+0

“页面加载错误”是什么? – jeroen 2011-06-14 23:43:38

+0

@ jeroen我想这不是一个错误,只是不正确加载。我不希望它在垂直对齐中显示缩略图,我希望在所有加载完成后显示。在缓慢的连接上加载页面,你就会知道我的意思 – dragboatrandy 2011-06-14 23:48:22

+2

@dtbarne我可能不像你这样知识渊博.....是的,我已经做了大量的调试,使其全部工作。我当然不指望人们为我做所有的工作。我一直在寻找的起点和一些可能的解决方案。我不会认为所有的工作。我发布了整个代码,因为通常当我发布内容时,他们希望看到整个代码以找到解决方案。 – dragboatrandy 2011-06-15 00:11:31

回答

9

当你正在使用jQuery,只要加入这个地方的脚本部分:

$(document).ready(function() { 
    $("#outerWrapper").hide(); 
}); 
$(window).load(function() { 
    $("#outerWrapper").show(); 
}); 

你当然可以在CSS设置#outerWrapperdisplay:none,但随后you'll再也看不到任何东西在浏览器中,其中javascript已禁用。

+0

@ jeroen我试过了,它似乎打破了脚本。不,它是抛出Javascript错误。 – dragboatrandy 2011-06-14 23:49:07

+1

从现在添加的脚本末尾有一个'';'丢失了'。这应该清除你的JavaScript错误。 – 2011-06-14 23:58:19

+1

您可能想要考虑隐藏溢出(width = 1,height = 1 overflow = hidden)而不是完整的'display:none';一些浏览器可能不会加载隐藏元素中的内容。 – Christian 2011-06-15 00:01:06