Simple question.
If I loop through PHP and create several images set to display:none and then use Jquery to access their visibility, does this increase page load time and such as if the images were actually displayed on the page?
If so, is there a simple way to load images dynamically, say if a user selects and option and another image gallery appears but the page does not refresh (ajax?)
Thanks!
Nope. This will actually take longer since you have to set display:none and then show them with jQuery than if you just showed them as they were downloaded.
In the second part of your question I think you're referring to lazy loading, where the images are loaded on demand from the user, instead of all up front.
Yes they would still download and slow things down even with visibility set to none (test it with livehttpheaders [or related] and see).
And yes, you can load them dynamically upon request with jquery in a number of ways. Have an onclick set the src, use an iframe, or create the element from an ajax call etc, etc.
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I have a bit of a challenging question (well it is for me anyway :) )
I am developing a Joomla template for a client who would like to include a jQuery slideshow, I am also using responsive design for upto 480, upto 800 and over 801px.
What I would like to do is setup 3 slideshow modules (for ease of use for the client, one for images 480 wide, one for images 740 wide and one for images 940 wide, then I would like to call that module depending on the users screen size. I know that this needs to be done with php in Joomla and that it is a server side script only and I'm not a fan on UA sniffing.
This is what I'm thinking, please comment on what you think.
Include PHP function that detects if the $screenWidth variable isset
If not, run javascript that detects users screen width, sets this variable to the URL (or another way that it will hold the variable).
Run an AJAX page reload
Pull the $screenWidth variable from the URL.
The original isset will now return true so the page continues to load.
Then run PHP code using that variable to load the appropriate slide show.
What do you think? will it slow the page down too much? Will the reload work and keep the URL in joomla?
Please let me know you thoughts and offer any suggestions.
Thanks
Lee
Are you sure you need to reload the page? Once you get the screenWidth from the client via an AJAX call, can't you generate the slideshow HTML and send it back? The client can then insert it into the DOM directly without having to reload the page, and you won't have to mess around with maintaining state.
There are many possibilities but i think simpler is better.
I think you should perform following steps
Write a startup javascript function that checks the screen width and height (screen.availWidth and screen.availHeight) and send it to server and create slide show accordingly and send back to client
I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.
Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.
How do I implement this - my site is built using php and tonnes of javascript.
Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.
Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.
ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.
ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.
I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.
Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)
EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.
I agree with MartyIX but the problem is the number of queries your system can handle, indexing is an option but it depends on volume of transactions on your servers. I do think we missed the whole point though, pre-loaders we meant to beautify the site, so the customers don't see ugly blank page while they wait :)
Can I Stop or interrupt PHP script for particular time?
I would like to implement logic like below:
on mydomain.com/index.php there will be flash appear showing some intro of a product for suppose 20 sec. Once it complete, on same index.php page the home page of site will appear.
I am not aware about flash (action script).
Is it possible in PHP or Javascript ?
Usually "splash pages", as the're called, are made up of a seperate page.
In flash you can use the following code (Actionscript 3). Put it int the last frame, or use an event listener to redirecrect when the file is finished. The actual redirect looks like this:
getURL("http://www.woursecondpagehere.com", "_self")
Where you place it is up to you.
EDIT: I think that this is a reliable solution because this guarantees (if implemented correctly) that the page won't move until Flash is done. CSS and Javascript will work fine too.
There isn't a need to interrupt PHP in the scenario given. Though I think what you want is to load the rest of the HTML after a certain event occurs.
If thats the case then you can use AJAX to load the additional HTML from the server. Or you can use CSS to hide that content and show it after a certain point.
The META Refresh tag is probably not what you want since it will redirect the user after 20 seconds, regardless of how long it took to load your Flash file, then play it. Since the speed of the user's connection cannot be reliably predicted, you will probably end up with a poor user experience.
What you want to do is definitely possible but it will involve some interaction between the Flash object and the rest of your page. If you could do as Moshe suggested and simply have the Flash object redirect the user's browser to your actual home page with content on it, that would be easier.
If you insist on keeping everything on the same page, one way to do it is to call a Javascript function from the Flash object once it's finished playing. The function you call should be written to hide the Flash object and/or it's container and display the container () with all of your content that you're ready to show.
See this Codefidelity blog post for a quick tutorial on how to call JS functions from Flash.
Also, to clarify, you won't be interrupting or changing when your PHP script runs. That runs on the server before the page is created and sent back to the user's browser. All you need to do is structure the HTML/CSS of your page to have two DIVs: one with the Flash object in it and the other with all your normal page content. However, set the CSS to only show the DIV with the Flash object, then finally use Javascript to hide that DIV and show the one with the content in it.
Try this,
write the your flash (splash screen) <embede> code in index.html and simply use javascript redirect function with javascript timer functions to redirect to index.php where you actual content is there.
something like...
window.location = "http://your.domain.name/index.php"
or
location.href = "http://your.domain.name/index.php"
use setTimeout() to call redirect after specified time.