Show loading icon during the javascript execution in asp .net page - javascript

I need to show loading icon when the page loads or clicking the link in the page which calls a javascript. Code is fully written in javascript for any operation in asp .net
Any suggestion would be helpful. Thanks

You can't use something like
<img src="Icon.png">
because you're not sure if the image will be fetched before the page. Especially if they refresh the page, it won't be likely.
For a static image, Probably the best way to do it is with a data url (search in Google and you can find someone to encode any image into a data url).
Or you can use some animated css, which is becoming more popular. Search for "css loader spinners" on Google and you'll find a number of examples.

Related

Techniques for loading page with several thumbnail images (laravel 5.3)

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

jQuery - go to page, take screenshot without load this page

I am trying to write an application in style of 4chan thread saver. I know that I can make a screenshot using html2canvas and even managed to do it. But how to load a html page without load it in browser? I care about keep the style of the page
This is not a jQuery issue. However, you should be able to do a XMLHttpRequest defined here and supply the url, to get the web page html back.

How can I make a web-page preview

I'd like to place a modal window with a description of an external page. But to give the user more information about the page he about to visit I'd like to provide him with a page preview.
I can see the following ways:
render a page with tools like CutyCapt - not working on my hosting :(
make the screenshot with external recources (I found some - all not
for free, I would try to find free tools)
show the page as it is using something like frame (frame tag is not
supported by HTML5).
My questions:
Is there any PHP tools to render a web page to PNG image not so
demanding as CutyCapt is?
May be I missed any worthwhile online tool to render a page to an
image?
I never used "frame" approach earlier so: is there any pros and cons to go deep into
it? Am I right that HTML5 analog of <frame> tag is <iframe>?
Did I missed any other way to do my job?
Thanks!
I once had a function on a page of mine which would load a specific page using an ajax-request and php-curl functions and then would just dump all the contents in a dynamically created <div> (Although I agree that the <iframe> is a better choice for this). But at that time I could not really adjust its size which made it kind of clumsy.

Google Website Translator - Waiting for translation to finish before displaying page

I'm trying to add localization to my site with minimal effort by using Google Website Translator. There's one really annoying snag I've run into though: Every time I try to load a (translated) page, it's displayed briefly in English before Google's javascript does its thing and it toggles to a new language.
I've tried setting "display: none" on my entire HTML body until Google's code finishes running, but I couldn't see anywhere convenient to put the javascript to toggle the display back to normal once the translation code is done without modifying the javascript file that Google loads from Google.
Is there a better solution?
Try Site Translator - http://www.deskshare.com/translation-software.aspx. The full content of your pages is directly on your website so you don't have to worry about the online service being slow or flashing the English text first.

Display loading image after clicking on a image/button using java script

I have developed an App using PhoneGap and JqueryMobile.
I have many HTML Pages , navigation from One page to other page on click of the image is taking lot of time.And the end user have no clue what is happening at the back end.
I would like to show loading image until the page gets loaded.
I'm wondering how could I use Jquery to show a simple "Loading..." on the screen until page is loaded.
Please help me on this.
With jquerymobile you can do this with $.mobile.showPageLoadingMsg() resp. $.mobile.hidePageLoadingMsg() as described in the documentation.

Categories