Как предварительно загрузить фоновые изображения без жесткого кода с помощью jQuery?

Следующее должно работать:

var video_stubs = $('.video_stub');
var loaded = [];
video_stubs
  .each(function(){
    /// store stub as a var so we can correctly access it in the callback
    var stub = $(this);
    /// get the URL as usual
    var bgURL = stub.data('thumb');
    /// create a temporary image that tells the browser to load a specific
    /// image in the background
    $('<img />')
      /// define our load event before we set the src value otherwise the
      /// load could happen from cache before we've even defined a listener
      .load(function(){
        /// set the background image $(this) no longer points to stub,
        /// it actually points to the temporary image.. so instead
        /// use the stub var we've created outside of this scope
        stub.css('background-image', 'url(' + bgURL + ')');
        /// store a list of what we've loaded - mainly for the loaded.length 
        /// count - but storing this information could be useful elsewhere
        loaded.push( bgURL );
        /// test that we've all loaded (remember this can occur in any order)
        /// so keeping an incrementing count is better than assuming the last
        /// image we try and load will be the last image to load completely.
        if ( loaded.length == video_stubs.length ) {
          /// finalise only after all is loaded
          $('#temp_overlay').fadeOut('slow');
        }
      })
      /// set the src value, once loaded the callback above will run
      .attr('src', bgURL)
    ;
  })
;

Основная проблема с тем, что вы уже пытались сделать, заключается в том, что вы пытаетесь сослаться на $(this) внутри функции обратного вызова. Вы должны убедиться, что знаете, куда ссылается this. С jQuery это всегда будут целевые элементы в коллекции, которые вызывают обратный вызов. Итак, в примерах, которые я видел выше, вы на самом деле пытаетесь получить доступ к временному образу, а не к заглушке.

Если вам действительно нужно, чтобы изображения были видны на 100% после исчезновения оверлея, попробуйте удалить его при загрузке $(window).

if(index == (count - 1)) {
    $(window).on('load',function(){
        $('#temp_overlay').fadeOut('slow');
    }
}    

Но будьте осторожны, потому что пользователям придется ждать загрузки каждого контента (внутреннего и внешнего), прежде чем оверлей исчезнет. Может быть, вы можете добавить ссылку «пропустить загрузку».

Вы можете проверить, было ли загружено изображение с помощью этой функции jQuery:

$('img').load(function() {
        $('#temp_overlay').fadeOut('slow');
});

Я использовал queryLoader2 в качестве предварительного загрузчика, который анализирует изображения и фоновые изображения на сайте. Однако я добавлял некоторые фоновые изображения через javascript (вместо того, чтобы записывать их в css или в тег стиля каждого элемента), поэтому предварительный загрузчик не мог фактически загрузить эти изображения.

После того, как я изменил код, включив атрибут фонового изображения в тег «стиль» каждого элемента, я смог успешно загрузить изображения!