Good practices to avoid broken page display?

Navigation
3

Problem:
I developed a site that, when loaded, is displayed with some bugs, such as images displayed in place of another one that was not loaded in time, totally bugged forms and without any stylization.

Alternative:
Pressing "F5", however a lay user, will not imagine that the page will be reloaded correctly after this function, resulting in loss of confidence or even evasion of the own.

Question:
What could be done to prevent the page from displaying with markup breaks, or incomplete stylization?

OBS:
The HTML is well applied semantically and the call from the external CSS file is just after title . I believe that creating a loading in php or js on the screen to fire the page only after being fully loaded already solves my problem, but I am willing and open to new solutions.

    
asked by anonymous 11.06.2014 / 18:26

3 answers

2

Is your layout done by images?

If yes, one of the ways to get around this resizing while uploading images is to predefine the size of the images.

This allows the browser to already reserve the exact space for the image. Also, if an image does not load, it will not disturb the rest of the layout (at least the space that it should occupy the browser will fill, even with an X of error).

Instead of just: 

<img src='http://meusite.dominio/imagem.extensao'>

Specify also width and height : 

<img src='http://meusite.dominio/imagem.extensao" width='50' height='300'>

A disadvantage is having to be marking the img tags with these attributes; but now it may be necessary.

    
13.06.2014 / 22:40
1

The first step is to identify the problem. There is a reason why images or CSS does not load correctly. CSS positioning is not directly tied to the problem. What may be happening is the server encountering problems while streaming the files.

You can also refresh the page automatically using JavaScript when it finishes uploading, but this does not guarantee that the images will load. In this case it would also be necessary to use cookies to know when the second time the page is being loaded.

Regarding the script in PHP , this will not solve your problem. What you can do is to use lazy loading or late loading , which basically loads the resource after the page has been fully loaded. With this it is possible to identify when a resource was not loaded correctly and try to load it again. The problem is that this causes performance issues when the site has a lot of features. In this case it is possible to implement a script PHP to assist in the process, however it is totally possible to be done in JavaScript .

A more aesthetic solution would be to define all elements with fixed height and width in CSS , so that when an element does not load it will not cause major training problems. This does not apply if CSS does not load.

    
13.06.2014 / 22:20
1

Display the html after loading - Js 

body.onload=function(){document.getElementsByTagName('body').style.display='none';};
window.onload=function(){document.getElementsByTagName('body').style.display='block';};

Loader in PHP will not answer you, because PHP is server-side .. ie it will render your page and after this, that browser will download the website, ie after php work is that you will download images, which is where the error occurs ...

Define size of each image is also good, preserve the space allocated before downloading ...

Setting standard image sizes helps. A read on responsiveness, also helps.

    
13.06.2014 / 22:56
How to filter a data frame? How do I rewind the file pointer correctly in Java?