Question

preload = function() {

        var imgList = [];
        var imgArr = [];
        var imageSize = element.find('img').size();
        var loadImgList = element.find('img');
        for(i=0; i<imageSize;i++){
            imgArr.push($(loadImgList[i]).attr('src'));
        }

        var total = imgArr.length;
        var loaded = 0;

        for(var i in imgArr) {
            imgList.push($("<img />")
                .attr("src", imgArr[i])
                .load(function() {
                    loaded++;
                    if(loaded == total) {
                        element.find('.loader').fadeOut('slow');
                        init();
                    }
                })
            );
        }

    }

Answer 1

I don’t know whether this solves your problem since you’re not saying what exactly doesn’t work, but you need to set src after you define the handler for the onload event.

Also, note that .load() has numerous issues when used with images as outlined in the jQuery docs:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:

• It doesn’t work consistently nor reliably cross-browser
• It doesn’t fire correctly in WebKit if the image src is set to the
  same src as before
• It doesn’t correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser’s
  cache