问题:

Why do images on the web load line by line? Why not from top left pixel to bottom right pixel? Is it about browser or css defaults? Is it possible to change that to show pixels at the moment they are loaded or after whole image is loaded?

回答1:

It has to do with the order they appear in the html document. The positioning in the page, doesn't matter in the loading priority.

回答2:

You can with Javascript or JQuery, like this:

$("#img").hide();
$('#img').load(function(){
  $('#img').show();
});

Basically it shows the image only if the whole image is loaded.

回答3:

You are talking about how exactly the image itself is loaded/rendered? It's a mix of:

implementation detail in each browser
how the image is formatted (which format, gif/jpeg/png

Can you control it using CSS? No, not really. You might do some effects using CSS animations/transitions, but not pixel by pixel. Not in an efficient manner at least.

回答4:

It depends on image format, some can load line by line, some are "progressive" and can load in "chunks" (firs a blurry, pixelated image is visible, then it loads some more data and becomes less blurry, and so on), some have to load in full before they can be displayed.