Ariel Rodriguez Romero

Lazily load jquery selectors

It’s a known bad practice to repeat in your code different calls to jquery with the same selector, so often the recommended way is to call those in a variable.But what happens when you want to refer to many different selectors??

Another thing I have been trying is to avoid adding CSS classes in javascript code, and rather pass them as options of the functions/classes in the code.

For that I created this little method, that given an object where you can specify the different selectors makes all the jquery calls automatically.

  function loadSelectors(sel) {
    var result = {}
    for (var i in sel) {
      result[i] = (function() {
        var element;
        return () => element || (element = $(i));
    return result;

The usage is pretty simple:

let selectors = {
	container: '.js-container',
	sidebar: '.js-sidebar'
let $selectors = loadSelectors(selectors);


The resulting object $selectors contains functions that will return the corresponding objects, but wrapped into jquery calls. The good thing is that they are lazily loaded and thus they are only called once.

Related posts

Jekyll: Re-designing my personal blog.

Finally! I updated the blog. I talk about the entire process here.

Display images in React application with Rails backend

Override-able options in rails partial view