1
\$\begingroup\$

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?

\$\endgroup\$
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – Daniel Sep 12 '13 at 2:25
  • \$\begingroup\$ Sure. What is it that you don't understand? :) \$\endgroup\$ – fresskoma Sep 12 '13 at 9:09
  • \$\begingroup\$ How to implement your suggestions on the code. \$\endgroup\$ – Daniel Sep 12 '13 at 9:20
  • \$\begingroup\$ I've updated the example to make the approach clearer, but honestly, you could've figured that out by yourself ;) \$\endgroup\$ – fresskoma Sep 12 '13 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.