0

Here's my cobbled-together fiddle in which I preload a number of face images, and the user can morph the central face by moving a marker around the circle surrounding it. At first the face morphs smoothly, but something goes wrong after about 15 seconds and the image transitions become very choppy. Note that this occurs for me regardless of user input, on multiple computers of various operating systems. What can I do to keep my image transitions smooth indefinitely?

This is the function that is updating the image and the marker:

function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
    var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
    var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
    var theta = Math.atan2(y,x)*(180/Math.PI);        


    var cssDegs = convertThetaToCssDegs(theta);
    var rotate = 'rotate(' +cssDegs + 'deg)';
    cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
    $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
    output =  cssDegs + randomOffset;
    output = (output % 360) + 1;
if (output < 0) {
    output = 360+output;// since angles go from 0 to 270 and then -90 back to 0
}
faceNum = Math.round(output/degreesPerFace);
if (faceNum < 1) {
        faceNum = 1;    
}
element.src = images[faceNum-1].src;
return [faceNum, cssDegs, output, xCoordinate, yCoordinate];

}

EDIT: It seems as though jQuery is canceling requests to obtain an image at some point for reasons unbeknownst to me. From Chrome's Network tab, I can see the following errors start cropping up pretty often:

enter image description here

If I am cueing the transforms to occur too quickly I don't think that's what is causing the problem, since this starts happening even if I load up the fiddle, do nothing and then start interacting with it after 15 seconds.

EDIT 2: On further inspection, this problem appears unique to Google Chrome, and my problems on other browsers resulted from using older versions of my script. This thread provides some background on the Chrome issue.

(My thanks to those contributors on this thread in particular, who made this whole thing a lot easier for a novice like me to do.)

Community
  • 1
  • 1
user3225632
  • 1
  • 1
  • 1
  • Um... how does it work? – Blazemonger Feb 11 '14 at 21:35
  • Consider using CSS sprites instead of dozens of individual images, as well as an image optimizer. – Blazemonger Feb 11 '14 at 21:37
  • You might consider using Chrome, right clicking, and clicking "Inspect Element" and looking at the timeline to see what's happening at 15 seconds. You can also put breaks in the script to see if it's a script issue. – snollygolly Feb 11 '14 at 21:37
  • though we can't see your actual calls, from your description it sounds like you are queing transforms faster than the transforms can be applied, which results in stacking, which results in choppy operation. Make sure that a loop or setInterval routine you might be using cannot get ahead of itself. Often this simply requires converting a setInterval into a tail-recursive setTimeout or oncomplete call. – dandavis Feb 11 '14 at 21:55
  • I think I'm starting to see what's happening. It preloads the images successfully, and displays them smoothly as a result... but after some time it decides to download the images anew, thus rendering the preloading useless. Is there a way to stop it from checking for new versions of the image? – user3225632 Feb 11 '14 at 22:34

0 Answers0