CODEWITHSUNDEEP
javascriptjquery
user3443198
user3443198

Reputation: 47

JS PreLoading Images Error

I have created an array with the URLs of all the images on my page, I then send this array to a function which in turn loads each one up. The page then loads the layout. I am however receiving the error:

Uncaught TypeError: object is not a function

Any help much appreciated

JS :

$(document).ready(function () {
    preLoadImages();
    useIsotope();
});

function useIsotope() {
    var $container = $('#work').isotope({
        filter: "*"
    });

    $('#control ul li a').click(function () {
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });
}

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

function preLoadImages() {
    var imageArray = new Array();
    $('.imgWrapper a img').each(function (index) {
        imageArray.push(this.src)
    });
    console.log(imageArray)
    preLoad(imageArray) // HERE IS THE ERROR
}

Upvotes: 1

Views: 52

Answers (2)

whoacowboy
whoacowboy

Reputation: 7447

I can't see an error with where you have commented, but this looks like an error.

You are setting $container = $('#work').isotope({ filter: "*" });

then trying to call 

$container.isotope({ filter: selector });

I think you might want to write it this way.

function useIsotope(){

  var $container = $('#work');
  $container.isotope({ filter: "*" });

  $('#control ul li a').click(function(){

    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });

}

Update after reading @Guy's answer, I too see the preload v. preLoad error.

Upvotes: 0

Guy
Guy

Reputation: 1444

Use preload(imageArray) instead of preLoad(imageArray).

JavaScript is case sensitive. (source)

Upvotes: 3

Related Questions