Pseudo-ajax
- Cross post from my blog
Web 2.0 began to densely enter the minds of people who want to make a website for themselves. As a special case - some people are just obsessed with Ajax technology. Required to use it trite everywhere. Naturally, you can try to convince the customer, but if this is impossible or out of place, then you can use a trick that I called "Pseudo-Ajax".
Let's first find out how most customers determine that Ajax works on a page?
In fact, only two points that are clearly striking are the work with information without reloading the page (looking at the address bar) and the spinning picture, aka loader. I like to generate loader on www.ajaxload.info
Consider a special case of the second moment. This is either downloading large photos on a page or downloading a large number of images. Naturally, the Ajax is not needed here at all, however, if the customer wants to see him there - we will show.
What is needed for this? In fact, not so much. Picture, with clearly defined dimensions and gif loader. Let's see step by step.
We take the img tag, specifies the height, width, but do not specify the address to the image. It looks like this (on the example of FF3 - but it looks about the same in all the necessary browsers):
Next we indicate the address of the img tag to the image, which is a transparent gif of the desired size. Put a loader on the background. It looks like this: http://absolvo.ru/tmp/9/index-2.html
Well, now replace the transparent gif of the desired picture. You can see it here: http://absolvo.ru/tmp/9/
Naturally, it is worth considering that with a thick channel you will not have time to blink an eye, as the picture will be loaded. However, if there are a lot of pictures (gallery or product list), then even on a thick channel you will see everything :)
')
The code looks like this:
"Img src =" absolvo.gif "width =" 120 "height =" 120 "style =" border: 1px solid # e5e5e5; background: url (ajax-loader.gif) center no-repeat; "/"
I repeat the links again:
http://absolvo.ru/tmp/9/ - demonstration;
http://absolvo.ru/tmp/9/index-2.html - demonstration with a transparent gif in the role of a picture;
www.ajaxload.info - loader generator.
Well, with access to the semi-finals, gentlemen :)
Web 2.0 began to densely enter the minds of people who want to make a website for themselves. As a special case - some people are just obsessed with Ajax technology. Required to use it trite everywhere. Naturally, you can try to convince the customer, but if this is impossible or out of place, then you can use a trick that I called "Pseudo-Ajax".
Let's first find out how most customers determine that Ajax works on a page?
In fact, only two points that are clearly striking are the work with information without reloading the page (looking at the address bar) and the spinning picture, aka loader. I like to generate loader on www.ajaxload.info
Consider a special case of the second moment. This is either downloading large photos on a page or downloading a large number of images. Naturally, the Ajax is not needed here at all, however, if the customer wants to see him there - we will show.
What is needed for this? In fact, not so much. Picture, with clearly defined dimensions and gif loader. Let's see step by step.
We take the img tag, specifies the height, width, but do not specify the address to the image. It looks like this (on the example of FF3 - but it looks about the same in all the necessary browsers):
Next we indicate the address of the img tag to the image, which is a transparent gif of the desired size. Put a loader on the background. It looks like this: http://absolvo.ru/tmp/9/index-2.html
Well, now replace the transparent gif of the desired picture. You can see it here: http://absolvo.ru/tmp/9/
Naturally, it is worth considering that with a thick channel you will not have time to blink an eye, as the picture will be loaded. However, if there are a lot of pictures (gallery or product list), then even on a thick channel you will see everything :)
')
The code looks like this:
"Img src =" absolvo.gif "width =" 120 "height =" 120 "style =" border: 1px solid # e5e5e5; background: url (ajax-loader.gif) center no-repeat; "/"
I repeat the links again:
http://absolvo.ru/tmp/9/ - demonstration;
http://absolvo.ru/tmp/9/index-2.html - demonstration with a transparent gif in the role of a picture;
www.ajaxload.info - loader generator.
Well, with access to the semi-finals, gentlemen :)
Source: https://habr.com/ru/post/27760/
All Articles