Hi,
Im trying to move all my js (jquery, fancybox, etc) to the bottom of my pages. But doing so is making my photo gallery not work in ie only. Anyone knows why that would be let me know? But i imagine there is no fix for that so…
This leads me to my question. Im thinking ill just put jquery/photo gallery js at the top of this one page and keep it at the bottom in the others. 99% will enter my site on the index page and the jquery will be cached. Now when they navigate to my photo gallery page and jquery is in the head, does the browser skip the user load delay when it encounters jquery because it is already cached or does it still delay the load time in some way?
That depends on what’s going on wit the page itself. May we have a look? There’s always a workable solution that can be put in to place.
That all depends on whether the browser has recently accessed the same jquery file. You can for example reference a google-hosted version of it, which many other people use too, increasing the likelihood that visitors will have already cached it.
Because you cannot guarantee that the caching will occur, you should put some thought in to that delay.
Loading the library from the head means that the delay will occur before your page loads, resulting in a longer delay for your user before they get to see your page load.
Loading the library from the end of the body means that the page appears to load much faster, because the delay occurs after the page has rendered itself.
Sure! I would much rather keep my jquery library and its plugins at the bottom. So if you could find a fix for IE that would be awesome. Here is the exact same photo gallery I am using on my page in question. It’s just striped down to the bear minimum. http://www.visibilityinherit.com/code/the-photo-gallery/basic-gallery-demo.php. Currently all the js is in the head. If you move it to the bottom IE stops working. Thanks for looking!
From the code, it looks like you’re trying to run the gallery function before it has been created.
Move the document ready block below the creation of the gallery function, and use the var keyword when creating the gallery function.
var gallery = function() {
...
};
...
$(document).ready(function(){
gallery();
});
By the way, jQuery now has a handy callback to replace the document ready one.
$(function () {
...
});
Thanks! I wonder why the doc ready was above? Strange that it even worked. OK I tried a few combos but nothing worked in IE. I may of been doing it wrong. Here is a complete working page with absolute links and the doc ready function at the bottom. Can you see what is missing?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } The Photo Gallery</title>
<style type="text/css">
body{background:#ccc;}
</style>
<link href="basic-gallery.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="gallery">
<div id="photos">
<b id="pic1"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/1.jpg" alt=""></b>
<b id="pic2"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/2.jpg" alt=""></b>
<b id="pic3"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/3.jpg" alt=""></b>
<b id="pic4"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/4.jpg" alt=""></b>
<b id="pic5"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/5.jpg" alt=""></b>
<b id="pic6"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/6.jpg" alt=""></b>
<b id="pic7"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/7.jpg" alt=""></b>
<b id="pic8"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/8.jpg" alt=""></b>
<b id="pic9"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/9.jpg" alt=""></b>
<b id="pic10"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/10.jpg" alt=""></b>
<noscript><p>You need to enable Javascript to view the Photo Gallery!</p></noscript>
</div>
<div id="controls">
<a href="javascript:;" onclick="this.blur();" id="first"><<</a>
<a href="javascript:;" onclick="this.blur();" id="previous"><</a>
<a id="number">1 of 10</a>
<a href="javascript:;" onclick="this.blur();" id="next">></a>
<a href="javascript:;" onclick="this.blur();" id="last">>></a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
gallery = function() {
var current = 1;
var total = $('#photos b').length;
$('#photos b').hide();
$('#pic1').fadeIn('slow');
$('#number').html('1 of ' + total );
setHeight(1)
$('#first').click(function(){
var prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#previous').click(function(){
var prev = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#last').click(function(){
var next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
function setHeight(current) {}}
$(document).ready(function(){
gallery();
});
</script>
</body>
</html>
The var statement has not yet been applied to the creation of the gallery function.
Like this? Ahh that works! Awesome thank you very much!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } The Photo Gallery</title>
<style type="text/css">
body{background:#ccc;}
</style>
<link href="http://www.visibilityinherit.com/code/the-photo-gallery/basic-gallery.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="gallery">
<div id="photos">
<b id="pic1"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/1.jpg" alt=""></b>
<b id="pic2"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/2.jpg" alt=""></b>
<b id="pic3"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/3.jpg" alt=""></b>
<b id="pic4"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/4.jpg" alt=""></b>
<b id="pic5"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/5.jpg" alt=""></b>
<b id="pic6"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/6.jpg" alt=""></b>
<b id="pic7"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/7.jpg" alt=""></b>
<b id="pic8"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/8.jpg" alt=""></b>
<b id="pic9"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/9.jpg" alt=""></b>
<b id="pic10"><img src="http://www.visibilityinherit.com/code/the-photo-gallery/images/10.jpg" alt=""></b>
<noscript><p>You need to enable Javascript to view the Photo Gallery!</p></noscript>
</div>
<div id="controls">
<a href="javascript:;" onclick="this.blur();" id="first"><<</a>
<a href="javascript:;" onclick="this.blur();" id="previous"><</a>
<a id="number">1 of 10</a>
<a href="javascript:;" onclick="this.blur();" id="next">></a>
<a href="javascript:;" onclick="this.blur();" id="last">>></a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var gallery = function() {
var current = 1;
var total = $('#photos b').length;
$('#photos b').hide();
$('#pic1').fadeIn('slow');
$('#number').html('1 of ' + total );
setHeight(1)
$('#first').click(function(){
var prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#previous').click(function(){
var prev = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
$('#last').click(function(){
var next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
function setHeight(current) {}}
$(document).ready(function(){
gallery();
});
</script>
</body>
</html>