CODEWITHSUNDEEP
jquery
Shah Rushabh
Shah Rushabh

Reputation: 147

jQuery init function not working

jQuery code:

$(window).load(function(){
    $("#slider").flexslider({
        animation: "slide",
        controlNav: false,
        directionNav: false,
        init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,1).each(function () {
                alert('init running');
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,2).each(function () {
                alert('before running');
                var src = $(this).attr("data-src");
                $(this).attr("src", src).removeAttr("data-src").removeClass("lazy");
            });
        },
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
    })
})

JSFIDDLE URL:

https://jsfiddle.net/6z5L31tg/

init function is not working. even it not alerting me. can you please explain to me why it not working? and How can I resolve this issue? I am weak in English. please apologize me if I made any Grammatical or Spelling mistakes.

Upvotes: 0

Views: 1479

Answers (1)

secelite
secelite

Reputation: 1373

You are using the .load() event, which was replaced by the same named ajax method in jQuery 3.0.

From the upgrade guide:

The event .load() method conflicted with the ajax .load() method. The .error() method could not be used with window.onerror because of the way the DOM method is defined. If you need to attach events by these names, use the .on() method, e.g. change $("img").load(fn) to $(img).on("load", fn).

I would also advise you to load the slider when the DOM is ready. I updated your fiddle: https://jsfiddle.net/6z5L31tg/2/

Upvotes: 1

Related Questions