Is it possible to create an initial loading screen (i.e. spinner) for PSK to improve the first paint before <my-app> is ready/loaded? That will at least inform the user that the apps is loading rather than having an empty page (i.e. slow first paint)
Sample code would be nice.
You can add to index.html file simple HTML/CSS preloaders like these. It should animate until DOMContentLoaded event. And on DOMContentLoaded you can remove that preloader or set display:none on that.
Inside your index.html is your main-component
<my-app></my-app>
Everything you put between this Tags will be discarded when the component has loaded and is painted..
so just do something like this:
<my-app> <h1>HELLO THIS IS THE LOADING SCREEN</h1> </my-app>
Of course it is better to put some divs instead of the h1 and style them like your basic UI components( maybe your toolbar and so on) + you can add fancy spinner animation inside... it just works great.
Related
I added a gif image in my html page but it was in the last section when I load my page it work immediately I want a way to pause or stop it until the user scroll down and reach it to work
Assuming you're using an animated gif, I think something called 'lazy loading' may help you. Essentially, this doesn't load an image until it's in view.
Typically lazy load is used to make pages finish loading faster. But in your case it could prevent your animation playing before it's in view.
Lazy loading images is done with javascript and you could use for example this jQuery plugin: http://luis-almeida.github.io/unveil/
I hope this helps you.
I am using jquerymobile 1.4.2.
I tried with all the functions which are specified using jquery(scrollTop).But it snot working in my page.
Is it possible to scroll to a specific position using css when we reload a page or when submit a button.
Your problem is that you have the script at the top of the page. I see you wrapped it in a $(document).ready() but that alone isn't always guaranteed to work, like in your case. $(document).ready fires when the dom is loaded, the dom tells the browser that somewhere in the page there is an image, but the browser won't know the size (in pixels) of that image until it's completely loaded. This causes your issue:
1) dom starts loading
2) dom is done, $(document).ready() fires
3) the script tries to animate the scrollTop but it won't work because the page has not yet reached its complete height (because the images are not loaded), so there is no scrollbar.
4) the images load but the script has already done its job
Solutions:
1) add height and width attributes to your images
2) use $(window).load() instead of $(document).ready()
A hint for the future: if the problem is "sometimes it works, sometimes it doesn't" it's a timing problem 90% (or even more) of the times. So try to figure out what happens and when.
No, there's no way to do that in CSS. Sorry!
Maybe, you should try for this one : jQuery.mobile.silentScroll()
I'm using chrome, is there a way to record the html behavior/changes whenever I load a page, or whenever I click a button, so that I can analyse the loading pattern of the html?
I need to do this is because I'm using a scrollbar plugin, and whenever the page load, if the plugin is currently loading there will be a class name attach to the html tag (e.g. scrollLoad). Once the plugin is loaded, the class will be removed.
The problem is I need to get the right class name so that I can target it inside my css..., I'm wondering is there a way to preview the loading of a html page.
you can add a script, that is triggered on each page load.
With jQuery you could check if a page is loaded completely. You could go the other way arround and add the loading class by default and remove it, as soon as the loading is completed
$(function(){
console.log("DOM ready");
$('#element').removeClass('scrollLoad');
});
Maybe you can use the on() with the 'change' attribute?
http://api.jquery.com/on/
Using this article I made an overlay div fade in/out on mouse click with ng-hide/ng-show. It works fine except one small thing - when page is loading and not all Angular is loaded yet, the overlay flickers for a moment then fades out when Angular loads respective variables that are in charge for overlay visibility.
The div looks like this in Jade:
.overlay(ng-show="overlayStatus=='on'", ng-init="overlayStatus='off'", ng-animate="'fade'")
Now to remove that flickering, and make the overlay hidden on load without Angular evaluations, I add style="display:none;" to this div and it seems to fix the issue. Though I am not sure if it's a proper way to do this.
Please advise.
You need to use ng-cloak directive
i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.