加载图片/内容后从外部URL的内容

Question

我想从另一个URL使用pushstate/html5加载内容...我想加载的内容有一个大的背景图片，需要时间加载...

所以，当动画快满形象似乎要拿出和幻灯片中，但随后又形象重新加载...

我尝试使用

image preloader/ 
$(document).ready() 

他们都打破了脚本，不能完全似乎弄清楚如何在这里加入它

function goTo(href) { 

    var left = $(window).width(); 
    $('#id').css("left", left); 

    $.ajax({ 
     url: href, 
     success: function (data) { 

      var content = $(data).find('#id').html(); 

      // Windows Load Function 
      $(window).load(function() { 

       $("#id").html(content).animate({ 
        left: '0', 
       }, 'fast'); 

       var title = $('#id').find('h1').text(); 
       $('head').find('title').text(title); 

      }); 
     } 
    }); 
} 

// check for support before we move ahead 

if (typeof history.pushState !== "undefined") { 
    var historyCount = 0; 

    // On click of link Load content and animate 
    $('.access a').live('click', function() { 

     var href = $(this).attr('href'); 

     goTo(href); 

     history.pushState(null, null, href); 
     return false; 
    }); 

    window.onpopstate = function() { 
     if (historyCount) { 
      goTo(document.location); 
     } 
     historyCount = historyCount + 1; 
    }; 
} 

Answer 1

蒙特克里斯托，

我觉得这是最好的解决Deferreds。

在下面的代码中，将一个Deferred对象作为第二个参数animator传递给goTo()。当imgSelector级别的所有图像都可疑时，此延迟将在goTo()之内解决。在解析animator时，动画会触发并且页面的标题被更改。

从外部创建animator并将它传递给goTo()允许将此Deferred从调用goTo()的范围中拒绝。如果在动画触发之前发生另一次点击或弹出事件，则会包含此功能以禁止动画。

为了完成这项工作，您需要为每个内容页面提供一个假屏幕前景<img>，其中src与有问题的大背景图像和class="critical"相同。这是加载背景图像时触发事件的最简单方法。

$(function() { 
    var $id = $("#id"); 
    var imgClass = 'critical'; 
    function goTo(href, animator) { 
     $id.stop().css("left", $(window).width()); 
     $.ajax({ 
      url: href, 
      success: function(data) { 
       var deferreds = []; 
       $id.html($(data).find('#id').html()); 
       $("img." + imgClass, $id).each(function() { 
        var d = new $.Deferred(); 
        deferreds.push(d); 
        $(this).on('load error', function(){ 
         d.resolve(); 
        }); 
       }); 
       $.when.apply(null, deferreds).done(function() { 
        animator.resolve(); 
       }); 
       $.when(animator).done(function() { 
        $id.animate({ 
         left: '0', 
        }, 'fast'); 
        $('head title').text($('h1', $id).text()); 
       }); 
      } 
     }); 
    } 

    var historyCount = 0, 
     animator = null; 

    function getDeferred() { 
     if(animator) { 
      animator.reject(); 
     } 
     animator = new $.Deferred(); 
     return animator; 
    }; 

    if (typeof history.pushState !== "undefined") { 
     $('.access a').live('click', function() { 
      var href = $(this).attr('href'); 
      goTo(href, getDeferred()); 
      history.pushState(null, null, href); 
      return false; 
     }); 
     window.onpopstate = function() { 
      if(historyCount) { 
       goTo(document.location, getDeferred()); 
      } 
      historyCount++; 
     }; 
    } 
}); 

未经检验

您可能需要调试和/或修改代码以得到你想要的东西。

Answer 2

你需要$(window).load()宁可$(document).ready()如果要等到所有的内容和图片都加载之后。

所以，你可能想是这样的：

$(window).load(function() { 
    $('some element').css('background-image', 'url(big-background-image-file)'); 
});