jQuery fn equivalent

Question

I have the following code:

var products = [];
    $('.mCSB_container').children('li').each(function () {
        products.push($(this).data("full-image"));
    });

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

$(products).preload();

what does this preload function does? Does it iterate through the array of products and then set the src to this? But what is this in this case.. What's an equivalent of this function without using the $.fn

It is used to preload images using dummy img elements.Then when you need to display for each product the full corresponding image, it will use cached image. — A. Wolff, Sep 10 '13 at 16:36
possible duplicate of [In jQuery, what does $.fn. mean?](http://stackoverflow.com/questions/3090230/in-jquery-what-does-fn-mean) — Praveen, Sep 10 '13 at 16:38
Doesn't `$('')` create a new image element rather than find one in the document? And why is the `[0]` required? — Carsten Massmann, Sep 10 '13 at 16:44
the `[0]` gets the underlying DOM object, instead of the jQuery object, in order to set the `src` attribute. If you used the jQuery object you would have to do `$('').attr('src',this)` which the only difference is the amount you have to type. — Patrick Evans, Sep 10 '13 at 16:51
Thanks @PatrickEvans, got it: `[0]` is more or less equivalent to the jQuery `.get(0)` method. (Irrelevant to this post, but: `.get()` can actually do a little bit more: with `.get(-1)` you will always get the last element in the array.) — Carsten Massmann, Sep 10 '13 at 17:26
This is a good example of how the prototype `.fn` should *not* be used. A better equivalent: `$.each(products, function(){ $('').prop("src", this); });` — Bergi, Sep 10 '13 at 20:07

score 2 · Answer 1 · edited May 23 '17 at 12:20

$(products).preload(); calls the preload method for each item in the $(products) jQuery object. It sets the .src attribute of the a newly created image object in the page to each string in the products array. I would guess that it's an attempt to cause the browser to preload images before they are needed for other uses.

You may find it simpler and clearer to use a preload function as described in this post: How do you cache an image in Javascript.

If .preload() is not called, then the images will take time to load when they are needed later in the page or later in the javascript. The purpose of preloading is to get the images into the browser's cache so they don't have to be loaded over the internet when they are next needed.

The assignment $.fn.preload = function() {...} is just defining the .preload() method as a method on all future jQuery objects. In jQuery fn is like assinging to the .prototype of jQuery objects.

can you show me the equivalent say if I didn't call the preload? — adit, Sep 10 '13 at 16:38

score 1 · Accepted Answer · answered Sep 10 '13 at 16:46

1

Without using the preload function you can do:

products.forEach(function(src) {
   var img = document.createElement("img");
   img.src = src;
});

using $.fn is just a way of adding to the functions that are available to objects created by the jQuery function/object

answered Sep 10 '13 at 16:46

Patrick Evans

41,991
6
74
87

I don't think this is guaranteed to work because the `img` objects go out of scope and could be garbage collected by the JS interpreter and browser before the images were actually loaded. It might or might not work, but I don't think it's guaranteed to work. In solutions like [this one](http://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript/10240297#10240297), the image objects are stored persistently to make sure that they don't get garbage collected before the images are loaded. – jfriend00 Sep 11 '13 at 00:32

jQuery fn equivalent

2 Answers2