jQuery Image/Hover Preview Causing Choppy Behavior in IE7

Question

Hi everyone,

I seem to be having some problems using jQuery to create a simple zoom in IE. In Firefox all is well, but IE is being reported as choppy by most users.

I've disabled the code in IE (using jQuery.browser.msie), but would love anyone's help if possible.

My jquery source code is below (ignore the upport function).

 this.imagePreview = function(){ 
 /* CONFIG */

  xOffset = 10;
  yOffset = 20;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

 /* END CONFIG */
 $("a.preview").hover(function(e){
  this.t = this.title;
  this.title = "";
  this.inside = $(this).attr('inside')
  this.outside = $(this).attr('outside')
  var c = (this.t != "") ? "<br/>" + this.t : "";
  $("body").append("<p id='preview'><img width='260' src='"+ this.inside +"' />"+ c +"</p>");         
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");      
    },
 function(){
  this.title = this.t; 
  $("#preview").remove();
    }); 
 $("a.preview").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });   
};
$(window).load(function(){imagePreview();});

Here is an example of one of the web pages in question: http://www.engreet.com/CategoryDetail.aspx?cid=17. If you scroll into the source, you'll see that the thumbnails have rollover/hover previews of the inside using code like such:

<a href="/CardDetailFull.aspx?cid=670" outside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_Front_633998103802577482.jpg" inside="http://static.engreet.com/ArtistFiles/51/Happy_Bela_InsideRight_633998103832264982.jpg" title="Inside Preview" class="preview">
 <img src='http://static.engreet.com/ArtistFiles/51/_128X178_Happy_Bela_Front_633998103802577482.jpg' alt="" width="128" />
</a>

Any help would be GREATLY appreciate. Happy to send someone a code for a few free cards!

Thanks, Adam

Answer 1

The problem ended up being a transparent background PNG image that was being repeated. It was 1x1 and filling a 755x600 square canvas. By increasing this to 25x25, all issues resolved. It was crazy how this problem displayed itself by affecting jQuery when ultimately it was IE's crazy rendering that cause the problem all along!

Hope this helps someone in the future.