jQuery parallax plugin

Question

I'm working in my project with the following script:

;(function(,ドル doc, win) {
"use strict";
 // cache the window object
 var jQuerywindow = $(window);
 $('section[data-type="background"]').each(function(){
 // declare the variable to affect the defined data-type
 var jQueryscroll = $(this);
 $(window).scroll(function() {
 // HTML5 proves useful for helping with creating JS functions!
 // also, negative value because we're scrolling upwards 
 var yPos = -(jQuerywindow.scrollTop() / jQueryscroll.data('speed'));
 // background position
 var coords = '50% '+ yPos + 'px';
 // move the background
 jQueryscroll.css({ backgroundPosition: coords }); 
 }); // end window scroll
 }); // end section function
})(jQuery, document, window);

The script allows me to have several sections with parallax background effect. So, I can have one or ten in a page. I'm a bit concern about performance. Can the script be improved?

Answer 1

First of all, your code looks quite good. You've encapsulated the plugin well, and cached all your jQuery instances, which are, in my experience, the most common pitfalls.

One thing I noticed is that you create a scroll event handler for every section[data-type="background"] element. Performance wise, this might not be optimal since the scroll event fires quite often. Instead of creating multiple scroll events, something like the following could be done:

var backgrounds = [];
$('section[data-type="background"]').each(function(){
 backgrounds.push($(this));
}
$(window).scroll(function() {
 for(var i=0; i < backgrounds.length; i++) {
 var $elem = backgrounds[i];
 var yPos = -(jQuerywindow.scrollTop() / $elem.data('speed'));
 var coords = '50% '+ yPos + 'px';
 $elem.css({ backgroundPosition: coords }); 
 }
});

John Resig wrote about scroll event performance quite some time ago, and it's still a good read (including the comments!). You might want to check that out too, and choose a technique of your liking.

And one more, very personal opinion: jQuerywindow is not a variable name I would choose. If you're determined to prepend every jQuery variable with jQuery, then write jQueryWindow, but I would suggest just using $window. I actually don't know where I got this from, but prepending every jQuery variable (including function parameters) with $ makes for very easily readable code (again, this is only a personal opinion).

---

Edit: Oh, and you probably should cache the jQueryscroll.data('speed') invocation, so that you don't have to read from the DOM every time a scroll event happens.

Edit2: And it is generally a good idea to do a little profiling when you're having performance problems, as guessing what might be the bottleneck is usually not very effective. Most modern browsers have some kind of JavaScript profiler available.

• Daniel: Thanks for your answer. However, I'm still learning JS and I'm having trouble to put all you said together. Would you mind to be more clear on the example?
• fresskoma: Sure. What is it that you don't understand? :)
• Daniel: How to implement your suggestions on the code.
• fresskoma: I've updated the example to make the approach clearer, but honestly, you could've figured that out by yourself ;)