Lazy Load & Filtering

[Macca]

Hi!

Does anyone have any tutorials/examples of a working lazy load script with filtering options?

PHP with MySQLi, Jquery, and Ajax

Example:
Display data from database and when scrolling down it loads more from the database until none left. However I'd need it so people can search at the top and fetch the one they've searched without having to continue scrolling to find it.

I've found this but want to add filtering to it which filters everything in the database rather than just what's loaded.

You must be registered for see links

Thanks in advance.

 

[Raizer]

Ok and what language u using..?

 

[Macca]

Ok and what language u using..?

PHP with MySQLi, Jquery, and Ajax

 

[Raizer]

Jqyey haha.. i recommend to use react or vue or angular for lazyload components

 

[TesoMayn]

Jqyey haha.. i recommend to use react or vue or angular for lazyload components

Why?

 

[MatthewK]

Why?

Because jQuery is way outdated, you can use one of the libraries @Raizer said but also just plain javascript or something

 

[TesoMayn]

Because jQuery is way outdated, you can use one of the libraries @Raizer said but also just plain javascript or something

jQuery was updated a year ago, I wouldn't call that "way outdated"

 

[Macca]

Any help appreciated.

I've found this but want to add filtering to it which filters everything in the database rather than just what's loaded.

You must be registered for see links

 

[MatthewK]

jQuery was updated a year ago, I wouldn't call that "way outdated"

Hmm still, jQuery is not a good option to do these things, it'll make your application a lot heavier and slower.

 

[Kurumi]

My advice is to use a github library.
Very light as jquery code

You must be registered for see links

The implementation is very simple.
You can also create the function to tell a specific element to load your Lazy.

Be horizontal or vertical.
So if you have for example Ajax
you must specify your class or id of your ajax images

The rest is the invisible line if you do not have the element on your screen that does not load.
If you make for example a pagination and go to page 2 this will load.

Ex:
Instance:
$('.lazy').Lazy({ // your configuration goes here scrollDirection: 'vertical', effect: 'fadeIn', visibleOnly: true, onError: function(element) { console.log('error loading ' + element.data('src')); } });

Parameter class optional:
var lazy = $('.lazy').Lazy({ chainable: false }); var attributeName = lazy.config('attribute'); // get lazy.config('effect', 'show');

// 'config' can receive entries or set them to a new value var value = instance.config('attribute'); instance.config('attribute', 'data-new-attribute'); // 'addItems' works with an jQuery object or any selector // so these two lines have the exact same result instance.addItems('img.new-items'); instance.addItems($('img.new-items'));

img atribute lazy or background automatily style
<div class="lazy" data-loader="customLoaderName"></div> <img class="lazy" data-src="path/to/image.jpg" />

 

[Macca]

My advice is to use a github library.
Very light as jquery code

You must be registered for see links

The implementation is very simple.
You can also create the function to tell a specific element to load your Lazy.

Be horizontal or vertical.
So if you have for example Ajax
you must specify your class or id of your ajax images

The rest is the invisible line if you do not have the element on your screen that does not load.
If you make for example a pagination and go to page 2 this will load.

Ex:
Instance:
$('.lazy').Lazy({ // your configuration goes here scrollDirection: 'vertical', effect: 'fadeIn', visibleOnly: true, onError: function(element) { console.log('error loading ' + element.data('src')); } });

Parameter class optional:
var lazy = $('.lazy').Lazy({ chainable: false }); var attributeName = lazy.config('attribute'); // get lazy.config('effect', 'show');

// 'config' can receive entries or set them to a new value var value = instance.config('attribute'); instance.config('attribute', 'data-new-attribute'); // 'addItems' works with an jQuery object or any selector // so these two lines have the exact same result instance.addItems('img.new-items'); instance.addItems($('img.new-items'));

img atribute lazy or background automatily style
<div class="lazy" data-loader="customLoaderName"></div> <img class="lazy" data-src="path/to/image.jpg" />

I'm displaying 100's of items from the database. When adding the class Lazy to the div it doesn't seem to lazy load. Only seems to work on images.

Any chance you can help further?

 

[Kurumi]

I'm displaying 100's of items from the database. When adding the class Lazy to the div it doesn't seem to lazy load. Only seems to work on images.

Any chance you can help further?

Indeed, this allows the images to save resources.
very useful.

And look for you instead:

Load More Content On Scroll Down - Ajax Mysql

Do a google search
I think you have examples

You must be registered for see links

and with even more add a filter with, finally a spanking possibility.
On the other hand, it is up to you to redo the code. and to check the code well before putting it in public, on google you never know!

 

[Macca]

Indeed, this allows the images to save resources.
very useful.

And look for you instead:

Load More Content On Scroll Down - Ajax Mysql

Do a google search
I think you have examples

You must be registered for see links

and with even more add a filter with, finally a spanking possibility.
On the other hand, it is up to you to redo the code. and to check the code well before putting it in public, on google you never know!

Happy to pay for someone to code the script I need if that's possible?

 

[Kurumi]

I think there will be enough tutorial on google to find what you wish from a departure such as on github!

You must be registered for see links

You must be registered for see links

Après avec un filtre chercher en javascript pur.

You must be registered for see links

After with a filter search in pure javascript.
I just came to try to help

Would be a shame to lose money, while you can find as much free source
If you are looking for a developer not too expensive to help you,
Maybe Fiverr would be helpful then