Search jQuery

jQuery Forum

lazyload ajax images not working

in Using jQuery Plugins • 7 years ago

I'm trying to lazyload images called via ajax.

But the console is throwing an error message saying "$(...).lazyload is not a function" despite the fact that i've tried embedding/linking the lazyload plugin. I am at a loss. Please help.

I am using this plugin http://www.appelsiini.net/projects/lazyload.

I am successfully able to call data via ajax only the lazyload images are not working.

$.ajax({

url: url,

type: "GET",

dataType: 'json',

success: function(data) {

appendJsonData(data);

//on json success init lazyLoad

$("img.lazy").lazyload({

effect: 'fadeIn',

load: function(){

var $this = $(this);

$this.addClass("lazyLoadedX")

}

});

error: function(req, txt, err) {

var errObj = JSON.parse(req.responseText);

console.log(errObj.message);

}

});

Thanks

Replies(9)

jakecigar

Re: lazyload ajax images not working

7 years ago

How many different versions of jQuery did you use? It’s probably not the jQuery code, but the HTML code that has the problem.

JΛ̊KE

watusiware

Re: lazyload ajax images not working

7 years ago

Did you read the documentation and follow it?

1. You don't need to use any Ajax to make the plugin work. The documentation explains quite clearly how to use it. Did you try it as shown in the documentation?

2. You can't download images in JSON format. (Unless you first encode the images into some text format - which would be silly and inflate their size.)

3. Using Ajax is exactly counter to the purpose of the plugin. It's a LAZY-loader, not a PRE-loader. It loads the images only after the user scrolls.

watusiware

Re: lazyload ajax images not working

7 years ago

Are you loading some HTML using Ajax and then inserting it into the document?

We can't guess what your appendJsonData() function does, since you didn't show it!

Nor can we guess what your returned data looks like, or if it is even valid JSON.

bennetonss

Re: lazyload ajax images not working

7 years ago

Jake,

My html goes inside another html (can't help it).

The site is using two versions of jquery.

jQuery v2.1.4 & jQuery v1.7.1

could it be a case of no-conflict?

Watusiware,

I am able to lazyload images on static htmls. I am aware that the plugin does not require ajax. Instead I am trying to defer the loading of images by lazy-loading them.

We receive input data in csv format from various sources and this is transposed into json format.

The appendJsonData fetches this data and appends the same - a href, title, price, image src etc into our template html.

This is working perfectly fine.

Example:

Initially inside my html template,

When ajax call = success, empty image tag gets populated with data from the server

If lazyload was running, it would have been,

But as i previously pointed out, console is throwing this error, despite embedding/linking the script.

"$(...).lazyload is not a function"

jakecigar

Re: lazyload ajax images not working

7 years ago

Use only one version of jQuery. $.noConflict is MAINLY for people using other libraries. It is ALWAYS a bad idea to use more than one version of jQuery.

JΛ̊KE

watusiware

Re: lazyload ajax images not working

7 years ago

Without a COMPLETE, working example that we can try, we can only guess that it is because of your two copies of jQuery. (And the evidence points to that...)

When you load a second jQuery, it replaces the first - AND any plugins that you had installed to that point. (That is, the plugins will be removed, as you've loaded a new, fresh jQuery, which has no plugins installed.)

Nobody should be using jQuery 1.7.1, at least not for web projects. It would be OK for internal use, IF all your users are locked-into vintage browsers that it will work correctly with!

If you have some plugin that won't work with a current jQuery, update the plugin! (Or find a new one, if it is abandonware.)

bennetonss

Re: lazyload ajax images not working

7 years ago

Thank you guys. Our site environment works on jQuery 1.7.1 and as i pointed out my html using jQuery 2.1.4 lives within the main site. I cannot do without the other. I will try to find a way around this and let you know.

Thanks.

watusiware

Re: lazyload ajax images not working

7 years ago

My html goes inside another html

and as i pointed out my html using jQuery 2.1.4 lives within the main site.

Really no clue what you mean by that. We are still playing a guessing-game.

What is YOUR definition of "site"? Mine is "a collection of HTML documents that are accessible from a base URL, usually (but not always) all within the same top-level domain.

Maybe you mean something else.

It's OK (but weird) to use a different version of jQuery in different documents of your site, since each document stands alone.. But you shouldn't use two versions in the same document.

As an aside, if you stick with 1.7.1, you will find that fewer and fewer plugins work, and fewer and fewer browsers will work.

You can provide a completely isolated environment within a document by using an iFrame. It's not a very nice solution, though.

PERHAPS you have already isolated the jQuerys (different documents, noconflict, iFrame...) and you are simply loading the lazyload script in the wrong place. Again, we can only guess. It's always better if you can provide a link to your site or make a demo using jsFiddle so that we are not having to guess.

bennetonss

Re: lazyload ajax images not working

7 years ago

Thanks Watusiware, but using an i-frame is not possible.

I have sort of resolved this by using a lazyload plugin https://github.com/ressio/lazy-load-xt/ that works with both jquery on-site.

Top Reply

Response title

Attachments

jQuery Forum

lazyload ajax images not working

Replies(9)

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Re: lazyload ajax images not working

Statistics

Tags

Actions