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.