Nine Posted October 24, 2014 Share Posted October 24, 2014 Hi, I have two codes which both do what I want to achieve, however it works too slow. Therefor the first code, when moving your mouse too fast, it does not work and in the second code the 'movie' flickers. Can I perload or load faster or something? Or maybe a complete other method works better? Code option 1:http://jsfiddle.net/DesignbyNine/the1sjLm/ <head><style type="text/css">.model { width: 400px; height: 300px; background-image: url('sprite.jpg'); background-position:0 0px; background-size:400px; position:absolute; left:223px;}</style><script src="jquery-1.11.1.js"></script><script type="text/javascript">jQuery(document).mousemove(function(event){ var x = jQuery(".model").offset(); var roundedoffsetX = Math.ceil(x.left/30.77) var relativeX = Math.ceil(event.pageX/30.77)-roundedoffsetX; var currentStep = relativeX*300; jQuery("div.model").mousemove(function(){ jQuery(".model").css("background-position", 0+" "+(currentStep)+"px") jQuery(".model span").text("X: " + event.pageX + ", Y: " + event.pageY) jQuery(".model p").text(currentStep) });});</script></head><body><div class="model" style="">Sunrise at 06:23<br/>Sundown at 20:54<br/><span></span><p></p></div> then I thought, this might help, so it is not such a big image that should be loaded but it doesn't really improve code option 2: http://jsfiddle.net/DesignbyNine/zc4xk2s2/ <head><style type="text/css">.model { width: 400px; height: 300px; background-image: url('Movies/Test12/dag-0000 copy.jpg'); background-position:0 0px; background-size:400px; position:absolute; left:223px;}</style><script src="jquery-1.11.1.js"></script><script type="text/javascript">jQuery(document).mousemove(function(event){ var x = jQuery(".model").offset(); var roundedoffsetX = Math.ceil(x.left/30.77) var relativeX = Math.ceil(event.pageX/30.77)-roundedoffsetX; var imageNumber = relativeX; jQuery("div.model").mousemove(function(){ jQuery(".model").css("background-image", "url('Movies/Test12/dag-000" + imageNumber + " copy.jpg')") jQuery(".model span").text("X: " + event.pageX + ", Y: " + event.pageY) jQuery(".model p").text(imageNumber) });});</script></head><body><div class="model" style="">Sunrise at 06:23<br/>Sundown at 20:54<br/><span></span><p></p></div></body> What can I do to make the process smoother? Link to comment Share on other sites More sharing options...
Hadien Posted October 24, 2014 Share Posted October 24, 2014 If you want to make this smoother, actually cache the images. using jquery to make CSS doesn't count. sprite.png is cached because you have it predefined already in the CSS and theres already an element using the class on the page. so after the 1st load the page will load faster. As was said in the previous thread you made STOP defining events inside other events. this is one of the reasons way its so slow. take a look at this update to your fiddle. All the images have been defined in the CSS, all Jquery is doing is swaping out the class on mouse move its not defining anything its not loading any thing everything is already loaded after the first iteration Also you don't need to type out the function name "jquery()" every time. jquery has a shorthand function so you can make your code more concise Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now