Good practices to avoid broken page display?

Asked

Viewed 229 times

3

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

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

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

OBS:
HTML is well applied semantically and the external CSS file call is right after the title.
I believe that creating a load 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.

ux

  • Dude, create a simple JS download and you solve the problem. If your images have a default size, or standard groupings, define css classes with defined height and width and then only apply the class to the image... save code. Ex: <img class="img-media" ... >

3 answers

2


Your layout is made by images?

If yes, one of the ways to circumvent this resizing while images are being loaded is to preset the image size.

This allows the browser to already reserve the exact space for the image. Also, if any image doesn’t load, it won’t disturb the rest of the layout (at least the space it should occupy the browser will take care of filling, even with a X error).

Instead of just:

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

Also specify width and height:

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

One disadvantage is having to keep tagging img with these attributes; but now it may be necessary.

1

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

There is also the possibility to update the page automatically using JavaScript when it has finished loading, but this does not guarantee that the images will load. In this case it would also be necessary to use cookies to know when is the second time the page is being loaded.

Already regarding the script in PHP, this will not solve your problem. What is possible to be done is the use of lazy loading or late loading, that basically you load the resource after the page has been loaded completely. With this it is possible to identify when a resource has not been loaded correctly and try to load it again. The problem is that this causes performance problems when the site has many features. In this case it is possible to implement a script PHP to assist in the process, but it is entirely possible to do it in JavaScript.

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

1

Display 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 suit you, because PHP is server-side.. that is, it will render your page and after that, that the browser will download the site, ie after php work is that you will download images, which is where the error occurs...

Setting size of each image is also a good, preserves the allocated space before downloading...

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

Browser other questions tagged ux

You are not signed in. Login or sign up in order to post.