延迟显示页面，直到所有内容都加载完毕
Posted
技术标签:
【中文标题】延迟显示页面，直到所有内容都加载完毕【英文标题】：Delay displaying of page until everything is loaded 【发布时间】：2011-09-15 03:13:40 【问题描述】：我有一个页面有很多事情要做，当它完成加载时看起来不错，但我希望它加载所有图像等，然后显示页面？可能是另一种解决方法。
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" /><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" /></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" /><img src="../images/r1c2.jpg" /><img src="../images/r1c3.jpg" />
<img src="../images/r2c1.jpg" /><img src="../images/r2c2.jpg" /><img src="../images/r2c3.jpg" />
</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" ></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'].'" title="View 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" title="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" title="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" title="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" /><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);
?>
感谢您的帮助！
【问题讨论】：
Page Load Error 是怎么回事？
@jeroen 我想这不是错误，只是没有正确加载。我不希望它以垂直对齐方式显示缩略图，我希望在所有加载完成后显示。在慢速连接上加载页面，你就会明白我的意思
@dtbarne 在这方面我可能没有你那么了解......是的，我已经做了很多调试以使所有这些都正常工作。我当然不希望人们为我做所有的工作。我一直在寻找一个起点和一些可能的解决方案。我不会认为所有的工作。我发布了整个代码，因为通常当我发布东西时，他们希望看到整个代码，以找到解决方案。
@dragboatrandy 我已更改标题以匹配您的问题。
@jeroen 谢谢。这实际上是一个更好的标题。
【参考方案1】：
当您使用 jquery 时，只需将其添加到脚本部分的某处即可：
$(document).ready(function()
$("#outerWrapper").hide();
);
$(window).load(function()
$("#outerWrapper").show();
);
您当然可以在 css 中将 #outerWrapper 设置为 display:none，但是您将永远不会在禁用 javascript 的浏览器中看到任何内容。
【讨论】：
@jeroen 我试过了，它似乎破坏了脚本。不，它会引发 Javascript 错误。 现在添加的脚本末尾缺少);。这应该可以清除您的 javascript 错误。
您可能需要考虑隐藏到溢出中 (width=1, height=1 overflow=hidden) 而不是完整的display:none;某些浏览器可能不会加载隐藏元素中的内容。
@dragboatrandy 那是因为在初始页面加载时内容尚未隐藏。就像我说的那样，您可以在 css 中将 div 设置为 display:none，但如果禁用了 javascript，则会中断。如果启用 javascript，效果会更好。
@jeroen 如果有徽章“耐心之王”，那么您现在已经赢得了它。两次...以上是关于延迟显示页面，直到所有内容都加载完毕的主要内容，如果未能解决你的问题，请参考以下文章