Improving the BigPicture I'm currently working on the library BigPicture.js with live demo here.

There surely are lots of little improvements possible in the main .js file (&lt; 300 lines of code), here are some little questions :


Is it common to use something like :

(function() {
  // code here
} ) ();


to launch the code and to be able that return; will work ? Or are there more common schemes ?
Should I place this at the end of the &lt;body&gt; in the mail .html file or in the &lt;head&gt; part?  Should I launch this code on something like DOMContentLoaded ?
When zooming to much (using the zoom feature I provide with mousewheel or double-click or PGUP/DOWN etc.) with Chrome (for example when a single letter uses full browser height, i.e. the text is really big), then panning (with CLICK+DRAG ) is really slow.  It is not true at all on Firefox, not on IE. What could be the reason (and solution) for this slowness with Chrome only?
Are there some other obvious improvements? I taught myself JavaScript (but with help of SO questions/answers of course), so there are surely some bad coding habits in my code, right?




Code for panning (a little bit shortened, see the project's page for real code)

  dragging = false;

  bpContainer.onmousedown = function(e) {
    dragging = true;
    previous_mouse = {x: e.pageX, y: e.pageY};
  }

  window.onmouseup = function() {
    dragging = false;
  }

  bpContainer.ondragstart = function(e) {
    e.preventDefault();
  }

  bpContainer.onmousemove = function(e) {
    if (dragging) {
      bp.style.transitionDuration = "0s";
      bp.x += e.pageX - previous_mouse.x;
      bp.y += e.pageY - previous_mouse.y;
      bp.style.left = bp.x + 'px'; 
      bp.style.top = bp.y + 'px';
      current.x -= (e.pageX - previous_mouse.x) * current.zoom;
      current.y -= (e.pageY - previous_mouse.y) * current.zoom;
      previous_mouse = {x: e.pageX, y: e.pageY};
    }
  }
I've used that before in my code. I find it is often used in libraries as an "initializer" that sets up the code and DOM for the library rather than forcing the user of the library to have to call an initialization function.
It depends. If you need to interact with the DOM right away(as in, find elements, change properties, or set element events), the code has to be at the bottom of the body. If it's just function declarations and definitions, you can keep your code in the head
Is this a question?
There is nothing that really pops out. You have very nice spacing in your code(everything isn't bunched together) and your formatting is perfect(in my opinion).