фоновое изображение в div не загрузится, пока не обновите его

Question

Каждый раз, когда я запускаю проект. Страница не загрузит фоновое изображение, пока вы не обновите страницу 2-3 раза или не нажмете клавишу f12 браузера. Я также использую preload.js.

<div class="fill-screen" style="background-image:url(../images/office.jpg); " data-src="images/office.jpg"> 

сценарий:

$(function() { 
var $this, src; 

    $('img').each(function(){ 
     $this = $(this); 
     src = $this.data('src'); 
     $this.attr('src', src); 
    }); 

    $('div').preload(function(){ 
     $(this).show(); 
     }); 

     }); 

и это CSS.

.fill-screen{ 
    background-size: cover; 
    background-position: center; 
    background-color:greenyellow; 
} 

Я хочу знать, где я ошибся. Я просто хочу, когда я запустил его, страница загрузит все.

Answer 1

У вас нет никаких Img элементов в коде, который совместно, однако вы используете фон IMG для дел.

Вы не установочное значение Src для того, чтобы обновить изображение в вашем примере вы должны быть перекрывая CSS для фона изображения с URL.

Попробуйте что-нибудь подобное.

$('.fill-screen').each(function() { 
    var $this = $(this); 
    var src = $this.data('src'); 
    $this.css('background-image', 'url(' + src +')'); 
});