Malyw

То есть, при срабатывании любого из вышеперечисленных событий, вы инкрементируете некоторую переменную (напр., «processed»), а процент «обработанных» браузером изображений обновляете примерно как:

updateLoderView( processed/ preloadImages.list.length);

Либо выполняете какие-то другие действия при срабатывании событий «load», «error»- это уже на ваше усмотрение.

Во время загрузки картинки возможны три варианта послежующих событий с ней:
1) Картинка загрузится (сработает событие load)
2) Картинка не загрузится (сработает событие error)- например, по указаному пути от сервера будет ответ 404
3) Загрузка картинки будет прервана (сработает событие abort)
Можно использовать следующий код:

var img = new Image();
img.onload = function(){
 console.log('img is loaded!');
}
img.onerror = function(){
 console.log('there is some error, when trying to load img');
}
img.onabort = function(){
 console.log('img loading is aborted');
}
img.src = 'https://www.google.com/images/srpr/logo4w.png';

Слушатели событий также можно навешать через addEventListener.

Эта функция из книги Стояна Стефанова «JavaScript Шаблоны», глава «Шаблоны создания объектов».

function checkNameSpace(parent,propString){
    var parts = propString.split('.');
    for(var i=0,len=parts.length;i<len;i++){
        if(typeof parent[parts[i]] === 'undefined'){
         parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
}
checkNameSpace(window,'localStorage.getItem');

На примере того же вконтакта:
при показе лаера на body ставится
overflow:hidden;
и показывается блок лайтбокса #layer_wrap у которого стоит:
height: 580px;
overflow: auto;
Именно это и позволяет добиться описанного вами эффекта.