We're using the customer's default browser to display locally generated HTML files in a preview mode. The files are between 0.5M and 2.5M in size. These files do not progressively render in any of the top 5 Windows browsers (Chrome, FireFox, IE, Opera, and Safari). In other words, when we try to load these files, the browser window displays a blank white page until the page is fully loaded.
The HTML files we generate have no tables or script and have all CSS references in the head section of the HTML file. Our pages include about 10 unique 16x16 png images (with image height and width explicitly included on each img tag) that are referenced several hundred times. Our output validates 100% compliant with XHTML 1.0 Strict using the W3C validation service.
Any tips on how we can enable progressive rendering of LOCALLY loaded HTML files or is progressive rendering a feature that is disabled for locally loaded files?
As an alternative, I'm looking for any tips that would allow us to display a GIF busy indicator graphic while the rest of the file loads and is rendered. We tried doing this by placing a GIF image at the top of our HTML file (immediately following the open body tag) followed by a div with display:none styling that included the full content of the HTML we want rendered. Unfortunately, the GIF file does not display until the full HTML file is loaded.
Thank you,
Malcolm
I can suggest that you confirm that the content is being interpreted properly by the browser. Despite the W3C checks, things could still be handled in 'quirks mode' .. In my experience, 'xhtml-transitional' has proved to be the most likely to provide cross-browser zen. Also, confirm that major tags like 'div' and 'p' are being closed quickly. It's hard for the browser to know what to do if the whole page is always in one layer of 'div' ..
Good luck!
Tim
Related
I am trying to embed one or more HTML files into a "main" overview file, while the embedded content shall be sized appropriately and should avoid the use of scrollbars. (E.g. iframe needs a size in px for height and width, whereas my content varies in size)
All of the files are located on the local drive of the computer and are not intended for web servers. (The files are sort of log files for a software component.)
Already been through the following ideas:
Use javascript to resize the iframe according to content. Unfortunately the browsers (so far Chrome and Firefox was tested) do not allow javascript operations as they are declared cross-site-scripting when using file:/// as the URI
Use of the HTML link tag. The content does not show.
Use of the HTML embed tag. The content does not resize automatically.
I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are
Is it possible to load an image in HTML and load it like an actual image (Like if it was an image/png mimetype etcetera).
Example:
This is me loading an HTML document that contains <img src="RL_Dark.png">:
Loading the image through an HTML document
But here's me loading it directly from the file:
Loading the image through file
Is it even possible to let the browser handle the image loading as I am not planning on doing anything via the HTML document that would be shown to the user (Statistic collection such as Google Analytics and Alexa Analytics), if it is, would anyone be able to show me an example?
Your browser (presumably chrome) when given the direct image url, loads the image in a gallery style view (where it applies centering and shows checkerboarding) whereas when given an HTML page, chrome shows a rendered HTML page. Chrome (and other browsers) often have built in UIs for handling different types of files (another instance would be music files)
In which case webpage loads without external stylesheet in chrome or safari ?
I am talking about a case in which webbrowser first loads webpage without stylesheet and then redraw it with css once it becomes available.
It would be great If you give me a small html page with external stylesheet, which always loads webpage without external stylesheet.
I am a webkit developer and want that case to do some development in webkit engine.
I believe that this is always the case. In other words, CSS files are always loaded asynchronously, and when they become available they are stored in the broser and applied to the existing DOM.
If you are interested in slow loading files, you can simulate this and see how your browser behaves. Best way is the following: get yourself a php and apache installation (say XAMPP), instruct Apache to handle .css files as php files (i.e. execute php code in css files), create a new css file and at its to add <? sleep(20); ?>. This will cause the css file to be delayed by 20 seconds, effectively simulating the slowloading.
Other than that, you could also wish to load a CSS file after the page is already loaded. Here you can find an example: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
Is there a way for nesting an image in an HTML page *inline* in IE7?
I can't use external resource, all because of a particular server configuration (it's a web dispatcher in maintenance mode that redirects all requests to a single .html page).
So I can't afford using the classical embedding by using the following:
<html>
<img src="mypic.jpg" />
</html>
When looking for a solution, I found these:
Using inline SVG within an XHTML file # => I can't use XHTML extension in my case the page has the .html extension (and I can't change it)
Using base64 encoding # => It works pretty well with Firefox & Chrome, but not in IE7
None of which seem to be working in my configuration.
The more I seek the less I hope. Any ideas?
The only option, as far as I know, for embedded image in an HTML document for current versions of Internet Explorer is VML (which isn't supported by anything other than Internet Explorer).
You could use something like Raphaël to abstract the VML or SVG into a single JS script (but that would add a dependency on JavaScript).
That easiest option would probably be to reference a normal image on an external URI … on a different server.
For the svg solution, your page doesn't need to end in .xhtml. In fact, it can end in whatever extension is handled by your web server.
The page being in xhtml is defined by its doctype definition. Put the doctype definition of xhtml 1.0 (strict or transitional) or even better xhtml1.1 and embed svg in the page.
As an alternate solution, you could try to output the image directly with an .html extension, keeping its original mime (image/jpeg for instance) but I'm not sure it would work.
Instead of redirecting to a single .html page, you could redirect to a single image and put your text on the image. This has obvious drawbacks, but how important is the image?
What you meant by base 64 encoded?