Some years ago I decided I could bypass all the browser inconsistencies by producing sites entirely in Flash. Doesn't look such a good decision now so I'm re-writing my semi-CMS framework in php, javascript/jQuery and HTML. One aspect of my Flash sites which I am very pleased with is the ability to load all pages or states in the background so the user rarely requests a page that isn't already loaded. When that does happen I can display a progress bar. In AJAX I can't display progress but I also found a significant difference I hadn't anticipated. In Flash I load the .swf for page 1 completely, before starting to load page 2. That means everything including images etc. In AJAX I can't see a way to do that. I can check that the HTML file itself has completed loading, but not that all its images have loaded before loading the next HTML file. Is it possible?
If you're looking for an HTML5 solution rather than just an AJAX solution you might want to investigate the Application Cache. There is a progress event which you could hook into, though it possibly doesn't get into the level of detail you need. As far as I'm aware, resources will start downloading in the order they're listed in the manifest file.
Related
I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.
I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.
It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?
FWIW, I can find ways of doing this for CSS and JS changes.
There is currently (as of Firefox 92) no such feature of re-applying HTML changes.
What I found is a feature request in Mozilla's bug tracker.
At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.
Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime.
For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.
I have a quite large app build using phonegap and jQuery mobile. I have about 5 pages withing the one HTML page (as per jQuery mobiles navigation system) all sharing one main JS file, which has 3400 lines of JS code.
The app has ran slower over the development period, and I Was wondering if it would make a difference splitting the app up into seperate HTML files and having them load into the DOM?
And secondly, would it also be worth splitting the javascript up so only javascript needed on the page is currently loaded with the page?
Like shall I have the whole 3400 lines of code loaded on device ready? or inject needed JS along with the page?
Yep as Nathan said I think you already know the answer.
I'd definitely recommend splitting your application into separate HTML pages and JavaScript, and loading the JavaScript only as and when you need it. I've heard people recommend a single-page architecture approach, although the difference there is that the HTML pages and JavaScript are injected in and loaded as and when they are needed.
See part 4 here in this PhoneGap tutorial for more information on properly implementing a single-page architecture.
It's not a good idea to load everything into memory at the start... it's an inefficient use of resources - as you can see from the slow performance.
And having separate HTML and JavaScript files should also be a lot easier to manage and understand as well.
After loading the too much data ~(250 records in listview) in jquery mobile page DOM. The navigation sytem transits very slow. I have tried verious tricks but unsuccessful. finally, I got the exceptable performance of navigation by applying below tricks.
Try to remove/hide the populated data from DOM when trying to change page.
when come back to page. repopulate it.
We all know that pre-fetching images can run slow because of browser limits in the HTTP protocol, right? So, I have XHTML, jQuery, Apache httpd, and PHP at my disposal. What's an easy solution to pre-fetch a lot of images, without using sprites or multiple hosts?
See, I have these themes one selects with a SELECT box. It changes the 200x200 theme image on the right of the box. Unfortunately there are like 150 of these. So, when I load the page, the progress bar keeps running to download these all.
How can I get these images pre-fetching faster without using sprites or multiple hosts?
If it's just a theme change, which probably rarely happens (right)? Then why wouldn't you just load the image for a theme when the the select is changed and a new theme is chosen? It seems "strange" to load 150 images of which 149 may not be seen.
Correct me if I'm missing the point - and if so, can you provide a screenshot so I can get an idea of what you're really trying to show?
Hindsight is probably 20/20. I probably should have implemented it in sprites, as well as for many of the buttons I used on the site. It's just that I lack a good sprite editor tool that speeds that process up.
Anyway, the strategy I went with was to use Javascript prefetch via jQuery. But even that wasn't enough. I had to wrap that function in a setTimeout(), but that only helped a little. I then had to fire that setTimeout() during a login form submit. It made the login form submit slightly longer, but made the website appear snappy on load.
I've been playin with Google's Page Speed, and it gave me some tips to improve the loading speed of my site:
http://alexchen.zxq.net/ (original hosting)
http://alexchen.co.nr (URL redirection)
I minified some Javascript files (I didn't compress them), and optimized some images, but it still kind of slow. I'm not very sure if I'm overloading something or its because i'm using a shared free hosting (I know, I have to get a .net or .com, but I'm having problems with my credit card right now).
Any suggestions?
In total your homepage loads 2.6mb, 2.4mb of images alone even though you only have a few directly visible. You should defer loading your showcase images like http://alexchen.zxq.net/images/showcase1.png until the thumbnails are clicked. This image is 0.5mb and gets loaded on every homepage visit whether someone visits it or not. See a lightbox javascript lib such as facebox which loads up the image on demand using AJAX.
Think about moving the position of the JavaScript to the bottom. As scripts block parallel downloading you should load these last to allow other elements like images to download. I profiled your site and the jquery seems to take a while to download, blocking other files from starting.
Turn on caching for static elements aswell in order to cut down server requests on second visit.
Install YSlow to get more details.
So, I've been tasked with making a kiosk for the office for showing statistics about our SCRUM progress, build server status, rentability and so forth. It should ideally run a slideshow with bunch of different pages, some of them showing text, some showing graphs and so on.
What is the best approach for this? I first thought of powerpoint, but It should be able to take the images from a webserver so I can automate the graph generation procedure. I would also like to take text from an external source when showing "Who broke the build" or some page like that.
I have no doubt that ready-made systems exist, but I don't really know where to look for them.
Is this easy/hard in powerpoint? Or are there an ubiquous app that everybody but me knows about?
I would recommend creating it as a series of web-pages, which uses Javascript or the meta refresh tag to cycle though the different pages. Simply full-screen the browser on a spare machine, and connect it to a projector/monitor/big TV.
This has lots of benefits:
it's trivial to display images from an external server (an <img> tag)
it will cost nothing to setup (it can run on basically any functioning machine), and runs in a browser
it is quick to do (you do not have to worry about cross-browser compatibility, or different screen resolutions as you know the exact machine you are developing for
it's expandable - while what you describe is probably possible within Powerpoint, but if you do it as a web-page, you can use Javascript (or a JS framework like jQuery), and it's very easy to serve the pages via a web-server, then you can use any server-side scripting language.
Basically, you would have a series of files, say slide001.htm, slide002.htm and slide003.htm. Slide 1 would redirect to slide002 after 30 seconds, slide002 to slide 003, and slide003 would redirect to slide001..
The specific things you mention: graph generation and "Who broke the build" text:
Not sure which CI tool you use, but many of them generate graphs anyway, so that would be required is having one "slide" with something like <img src="http://hudson.abc/job/proj042/buildTimeGraph">
For the who-broke-the-build text, you would be easiest to run the slides as .php files served though a web-server, using XAMMP.
Then you would have a function that scrapes your CI server for whoever broke the last build, and in one of the slides, you would have <?PHP echo(who_broke_build()); ?>
(Obviously if you know some other language/system better, use that!)
The final benefit I can think of is that, if you serve the files through a web-server, you can allow people display it locally, say as their browsers home-page.
Thanks. I found jqS5 which did most of what you mentioned.
It requires 1 document where every h2 becomes a new slide.
I can then use the meta-refresh to reload to next page every 10 seconds. When I reach the end of the slides, I pull data from an aggregated RSS feed from all the different systems in order to pull information.
http://staticfree.info/projects/jqs5/