I have 1000 images in a database. On page load I am randomly showing 60 images, when user scrolls I add 20 images through an AJAX request.
First method which I did was load all images into a container and then hide all and show 60 first images and on scroll start showing every 20 more. But the problem is that page loads all display none images as well (all 1k images).
Second method Load randomly 60 images from DB. Then on scroll Load extra 20 images:
var id_array=[];
$('.items').each(function(index, element) {
id_array.push($(this).data('id'));
});
$.post("request.php", {
send: "true",
json:JSON.stringify(id_array),
}, function(response) {
add_content(response);
});
I am running through all images to get their id, then am sending json to php to do an SQL query:
SELECT * FROM table WHERE id NOT IN (json, ids, right,here) ORDER BY rand() LIMIT 20
The problem is if there are 1000 images on screen and adding more, then
WHERE id NOT IN (1000, items)
will be very slow, right?
How I could improve this performance as it sometimes laggy and obviously not optimized?
I don't know if this is a best practice, but I thought about just fetching the image paths into an array, using shuffle() on it and storing it in a session variable.
You could then use array_slice() to return parts of it for each subsequent request.
If you are showing 20 images on page loads then pull first 20 records on page load. And then display it on you page. After that when user scroll down and reached bottom of the page, you can again do a ajax call for next 20 records and so on. And when user reached a point when there is no more records present do not call ajax any more.
This way you can optimize your codes and pulling 20 records will be faster then pulling 60 records.
Hope this idea will helps you to make your page loads faster in a better way.
Related
I have a webpage that is auto-refreshed every 240 seconds with the generic HTML Meta tag. During the refresh it pulls data from a database which takes the site about 15 to 20 seconds to build before it's shown to the user. During this time I wish to show a small DIV with a loading message telling the user that it's loading data.
The more complicated thing about this is that the user has a few menu options to filter out specific data from the database. When clicking such an option the page is reloaded again and takes 15 to 20 seconds to build.
Users that aren't familiar with this loading time might feel the need to click the same menu option over and over again within a few seconds hoping that the page will load faster. But instead it will most likely cause the database server to get overloaded with requests.
So, to tackle this I wish to use jQuery to show a loading message, then have it load the data from the database (with a PHP script) and finally dump the data on the page.
I've done something similar but that was limited to users clicking a link which caused a jQuery script to load the data while showing the waiting DIV (using CSS rules).
I can't figure out how to implement this solution for an auto-refresh.
Some help would be nice.
You can use the same solution with auto-refresh as well, with the mention that the initial page load doesn't container the data that requires the DB call, but instead shows a loading message and starts an AJAX call to a server side script that returns the data.
Your page load:
Request
Server query DB
DB Response
Page loads (with data)
Ideal page load:
Request
Page loads (without data) <- loading message here
AJAX call
Server query DB
DB Response
Page updates (with data)
I'd second megawac's comment. Don't use a meta refresh. Also, 15-20 seconds is a very long time for generating a database report that is going to be generated every 4 minutes; odds are that you're bogging down your server pretty badly. Very few queries should really take that long, especially queries that need to be run nearly continually. I would strongly recommend refactoring your queries or doing some caching to speed things up. If you post some code, I'm sure people would be happy to look at it.
I have a webpage that run a query on a db and reports the results. Currently the page auto refreshes itself every 10 seconds in order to display (almost) real-time data.
This is probably a very inefficient way of accomplishing this but as of right now I'm not really sure what alternatives there are.
What options do I have to present real-time data on a php webpage?
you can use node.js and socket.io. This is great example to get you started:
http://book.mixu.net/ch13.html
or you can use ejabberd and strophe js library.
I used both of that solution for real time stuff and I found node.js and socket.io much easier to implement.
Depending on what your data is for and how you are using it, ive recently started putting data display functions into seperate pages and then using jquery to load those pages into dives on my main page at page load and then reloading the divs on a timer and on a reload function if the refresh is needed sooner, that way your whole page does not refresh making it flash and go blank but instead the data just gets nicely updated.
var paused = false,
auto_refresh = setInterval(
function()
{
if (paused) return false;
$('#mot').fadeOut('slow').load('motview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#work').fadeOut('slow').load('workview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#motday').fadeOut('slow').load('motdaylist.php? view1=$dayd&viewdate=1').fadeIn('slow');
$('#notelist').fadeOut('slow').load('notelist.php?dayd=$dayd').fadeIn('slow');
}, 60000);
$(document).ready(function(){
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
});
function reloaddivs()
{
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
};
the above im using to display 4 lots of data on one page that all updates nicely on a timer or after ive interacted with a page by calling reloaddivs
Inspect your page carefully to identify exactly what is the data which is to be updated every 10 seconds - chances are it will not be the whole page (menus, navigation, headers, footers).
Cache all that data say, every 10 minutes, or every hour - especially if data driving any of those elements are being dragged from databases.
Then include the panel containing the dynamic data.
Better yet might be to load the dynamic data using Ajax to refresh every n seconds.
I need to load a lot of data fetched from a mysql db in my webGL page. The approach I found is this: http://www.w3schools.com/php/php_ajax_database.asp
although the idea of a first fetching with PHP and then passing it to the webGL page isn't exciting, any alternative?
It is not very clear what you are trying to do, but if what you want is to display data to the user and you have too much data, than you should use paging/pagination.
This is the process roughly:
You need to read a portion of the data (lets say 100 records) and display it to the user in page one.
you have buttons that enable the user to move to other page.
on click, you send an ajax request with the pressed number and you know that you need pressed number * 100 to ((pressed number *100) + 100)
for example:
first page displays rows 0-100, user clicks next you get rows 100-200 and display them.
first page displays rows 0-100, user clicks number 4, you get rows 400 - 500 (4*100 to ((4*100) + 100)).
I have a coupon code site. On some category pages I'm limiting it to display only 50 coupons as there are potentially 1000's of coupons for each category. I don't display them all as it would be hard on the server, and the browser will hang. Is it possible to lazy load more coupons as the user keeps scrolling down?
The only lazy load plugins I've found are for images. Anything out there that will work with PHP and loading data from a MySQL db?
Any help is appreciated. Thanks!
You will definitely need javascript or jquery for this. Just use an onScroll event when the scroll-bar is for example at 75% call a php-file using AJAX, pass 2 parameters for the query. Using the SQL Limit you need to set the start-indicator and the number of rows you want to collect: SELECT * FROM tbl_coupons LIMIT 50,20
You can use let the php output the html you want to use and insert the html straight into the Dom or if you want to parse the data using JS you can use *json_encode* to create a json-object from an array of rows.
do you mean like this one http://www.webresourcesdepot.com/dnspinger/
Personally I would do it with ajax, as soon as the browser detects a scroll it start to load the next coupons from the db, once they are loaded it will display them. I'm not aware of a script that would do this automatically, but it's not difficult to code with jquery.
Another idea would be to cache the coupons page, assuming they don't change every second it could be a feasible solution.
I have an SQL query that returns an amount of tuples (about 50).
Now I need to display the results, 15 tuples at a time, then I will have a "view more" button to view the next 15 results.
Can you please help me how I can make this? The issue is that I cannot use the 'limits' because each time I run the query the results will be different, hence when pressing view more, I may get the same results of the same page.
thanks
If you can't use LIMIT, this means your script will have to fetch and load the 50 tuples. If you only want to display 15, you should look for a Javascript solution to hide the others and only show the active ones.
The JQuery Datatables is an EXCELLENT piece of work. You just load all the tuples in a table, and call the Datatable - that's it! You can later customize it to show more or less than 15 at a time.
Instead of reloading, you should put each "page" into a display:hidden div and using JS you show one div after another.
If you can only run the query once, you only have two options:
Send the entire resultset to the browser, hiding all but 15 rows. "View more" would simply unhide more rows.
Run the query once and cache the results, but only send back the rows requested to the browser. When more rows are requested from the browser, send back another set of cached rows. This is useful for progressively loading large or complex data sets.