I’ve been noticing how on one of my favorite webcomics, Dr. McNinja, the page that displayed each comic was loading pretty slow.
Before:
<td valign=top><table border="0">
<tr><td align=center width="175"px><a href="page.php?pageNum=1&issue=10"> <img src="/graphics/1.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=2&issue=10"> <img src="/graphics/2.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=3&issue=10"> <img src="/graphics/3.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=4&issue=10"> <img src="/graphics/4.gif" border=0> </a> </td></tr>
<tr><td align=center width="175"px><a href="page.php?pageNum=5&issue=10"> <img src="/graphics/5.gif" border=0> </a> </td></tr>
After:
<td valign=top id="pages">
<a href="/page.php?pageNum=1&issue=10">1</a>
<a href="/page.php?pageNum=2&issue=10">2</a>
<a href="/page.php?pageNum=3&issue=10">3</a>
<a href="/page.php?pageNum=4&issue=10">4</a>
<a href="/page.php?pageNum=5&issue=10">5</a>
CSS:
#pages a { font-weight: bold; color: #FFFFFF; background-color: #000000; display: block; text-align: center; width: 25px; margin-bottom: 3px; text-decoration: none; }
PHP (with NEW current page highlight! oooohhhhhh!):
for($p = 1; $p <= $pages; $p++) {
unset($style); if($p == $page) { $style = ‘ style="color: #CCCCCC;" ‘; }
echo ‘<a href="/page.php?pageNum=’.$p.’&issue=’.$issue.’"’.$style.’>’.$p.'</a>’."\n";
}
For some reason unbeknownst to me (and I emailed the tech girl, Zoe (who apparently offers help on websites, WTF?)), it was deployed so the output is as such:
<td valign=top id="pages"><table border="0"> <tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=1&issue=10">1</a> </td> </tr><tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=2&issue=10">2</a> </td> </tr><tr> <td align=\"center\" width=\"175\"px> <a href="/page.php?pageNum=3&issue=10">3</a> </td> </tr>
Yanno, you try to help some people, and they just don’t really listen. And yes, those slashes before the double-quotes are in the output HTML.
The page load is still much faster after dropping all those img calls, but meh. Why the extra table? Why????
Not everyone can be as awesome as you, Will. A-W-E-S-O-M-E!
I like in the Before how they specified the width as:
width=”175″px
Don’t do it that way. You’ll never make a dime.
Thanks, Trey. T-R-E-Y!