Why doesnt this preload -- rollover script work? - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Why doesnt this preload -- rollover script work?

kingoslo

2:37 pm on Jun 16, 2010 (gmt 0)

10+ Year Member

Hello there,

Thank you for reading my thread. :)

In body-element:



<script type="text/javascript" language="javascript">

$(document).ready(function(){
$('a[id]').hover(
function() {
// mouseIn
id = $(this).attr('id');
$('#portraitImg').attr('src', 'img_news_thumb.php?id=' + id);
}, 
function() {
// mouseOut
$('#portraitImg').attr('src', 'img/design/portrait.jpg');
}
); 
});
</script>



<img id="portraitImg" /><br />
<br />
<br />
<a href="#">This is a caption</a><br />
<a id="1001" href="#">This is another caption</a>

In head-element:


<script type="text/javascript">
//try to preload. This doesnt work in firefox, chrome or IE 7.
if (document.images) {
var array = new Array();
$('a[id]').each(function(){
id = $(this).attr('id');
array[id] = new Image(479,319);
array[id].src = 'img_news_thumb.php?id=' + id;
});
}
?>
</script>

The rollover effect works on chrome, firefox and ie, but it loads the image from the server each time I mouseover on chrome, and doesnt preload in the other two bowsers.

Any idea whats wrong?

Fotiman

3:22 pm on Jun 16, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I notice a few things.
1. You have a ?> just before your closing script tag. You probably need to remove that.
2. Don't include the language attribute on your script elements. It's invalid and not needed.
3. Both of those scripts are creating/modifying a global "id" variable. You should do 'var id' to prevent globals from being created.
4. The script in your head is not wrapped in a function call, so any variable are going to be global, which in general should be avoided.
5. Instead of "new Array()", use "[]" (declare it as an empty array literal object... it's more efficient and takes up less bytes)
6. Don't name variables "array", simply to avoid confusion with the Array object. Use "arr" or "imgArray" or something similar instead.
7. Don't specify the width/height properties when creating the new Image.
8. In your particular example, you're not really creating an "array", as the index values are not necessarily going to be ordered and sequential. Instead, you really want to create a hash map, so instead use {} instead of "new Array()" or "[]". Then, since id could be numerical or not, I would append it to a string ("k_" for "key"). In reality, you could probably just replace a single variable since you're not using the array/hashMap for anything.

Presumably you're using jQuery... does the script in your <head> appear after the jQuery library is loaded? Also, is there any reason you're doing that in the head? It would be better placed as far down in the page as possible. Here's how I might change it:


<script type="text/javascript"> 
$(document).ready(function(){ 
  var id,
    tmpImg; 
  $('a[id]').hover( 
    function() { 
      // mouseIn 
      var id = $(this).attr('id'); 
      $('#portraitImg').attr('src', 'img_news_thumb.php?id=' + id); 
    }, 
    function() { 
      // mouseOut 
      $('#portraitImg').attr('src', 'img/design/portrait.jpg'); 
    } 
  );
  //try to preload
  if (document.images) { 
    $('a[id]').each(function(){ 
      id = $(this).attr('id'); 
      tmpImg = new Image();
      tmpImg.src = 'img_news_thumb.php?id=' + id; 
    }); 
  } 
}); 
</script>

Hope that helps.

kingoslo

12:03 pm on Jun 17, 2010 (gmt 0)

10+ Year Member

Now, in I.E. and firefox there is no problem, but Chrome has a problem when I try and mouseover. There is a massive delay before the images are changed.

How can we find out what is causing the problem?

Fotiman

1:13 pm on Jun 17, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Chrome has some pretty good developer tools that might help. If you click on the icon that looks like a Page (top right corner), you'll get a menu which includes Developer > Developer Tools. Start that up then click on Resources (you may have to enable it for the session). In the left panel, click on one of the images and in the right panel click on the Headers tab. Perhaps that might give you some clues as to whether the browser is able to cache the image. I wonder if being a PHP page vs. a direct link to an image might also cause caching problems.

kingoslo

4:36 pm on Jun 17, 2010 (gmt 0)

10+ Year Member

Data from developer tools:

Request URL:http://www.example.com/img_news_thumb.php?id=1009
Request Method:GET
Status Code:200 OK
Request Headers
Referer:http://www.example.com/
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.70 Safari/533.4
Response Headers
Connection:Keep-Alive
Content-Type:text/html
Date:Thu, 17 Jun 2010 16:32:27 GMT
Keep-Alive:timeout=1
Server:Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8e-fips-rhel5 DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 PHP/5.2.13
Transfer-Encoding:chunked
X-Powered-By:PHP/5.2.13

Also on the left hand side there is the number 1 on a yellow circle next to the file name.

What do you think?

EDIT:
----------
I also looked at the load times, and it seems Chrome loads the image each time the script asks for it.

Anyone have a clue why this happens? It also happens for images (jpg) that is not created by a php file.

Any ideas?

Fotiman

6:54 pm on Jun 17, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Content-Type:text/html

That seems wrong to me if it's actually returning an image. Perhaps your img_news_thumb.php script needs to set this to something like image/gif (or whatever it is that's being returned).

kingoslo

8:41 pm on Jun 17, 2010 (gmt 0)

10+ Year Member

Changed that now, didn't resolve the problem.M