Jquery加载页面

我试图用jquery创建一个简单的网站http://cone.hostei.com/index3.html。我只想使用函数将html页面加载到div中。问题是，功能 - $('.preloader').hide()和（{ opacity : 1 }），火灾之前，页面及其图像完全加载到一个div！我该如何解决它？Jquery加载页面

$(window).load(function() { 
$('li a').click(function() { //event on click 
    var toLoad = $(this).attr('href'); //get href of a li element 
    $('.load-in').fadeOut('fast', loadContent); 
    $('.loader').show(); //show the loader 


    function loadContent() { 
     $('.load-in').css({ //set opacity 0.3 
      opacity: 0.3 
     }).load(toLoad, hideLoad); //load html page, then callback 
    }; 


    function hideLoad() { 
     $('.load-in').fadeIn('fast', 

     function() { //hide preloader and set opacity 1 
      $('.loader').fadeOut('fast'); 
      $('.load-in').animate({ 
       opacity: 1 
      }); 
     }); 
    }; 
    return false; 
}); 
});

来源

2013-04-10 user2264246

你的问题不清楚。没有冒犯性，代码在你的页面上结构也很差。要破译你的意图是非常困难的。 – 2013-04-10 02:47:35

您需要将相关代码复制到问题中，而不仅仅是指向网页的链接 – 2013-04-10 02:58:43

您需要确保将您的jQuery代码放入$（document）.ready（）处理程序中。这将确保您的代码在页面中的所有元素都被加载后运行。

见jQuery的API页面：jQuery - .ready()

来源

2013-04-10 02:46:36 EthanTowne

它已经在他的页面上的'window.load'中。看代码。 – 2013-04-10 02:49:54

这根本不是问题。阅读问题。 – plalx 2013-04-10 02:52:55

如果要检测的图像时，满载，这样你就不会看到被显示的内容后，它们出现，你必须附加一个load事件处理程序包含在.load-in元素中的所有图像上，并在所有图像加载之前等待元素淡入淡出加载指示符。

像这样的东西（根据您的站点代码）：

function loadContent() { 
    var $loadIn = $('.load-in'); 

    $loadIn.css({ opacity : 0.3 }).load(toLoad , function() { 
     var $images = $('img', $loadIn), 
      imageCount = $images.length, 
      loadedCount = 0; 

      //wait on images before showing the content 
      $images.on('load', function() { 
       if (++loadedCount === imageCount) { 
        $images.off('load'); 
        hideLoad(); 
       } 
      }); 

      //make sure the content is still shown if images fails to load 
      //or are very slow to load 
      setTimeout(function() { 
       if (loadedCount !== imageCount) { 
        $images.off('load'); 
        hideLoad(); 
       } 
      }, 5000); 
    }); 
};

然而，这里的一些事情你应该知道（从http://api.jquery.com/load-event/拍摄）：

负载事件

注意事项当与图像一起使用一个常见的挑战开发人员试图解决使用.load（）快捷方式是执行一个功能时，一个图像（或图像集合）完全加载了。有几个已知的注意事项，应注意。它们是：

这并不一致，也不可靠地工作，跨浏览器的

它不正确的WebKit如果图像的src设置为相同的SRC作为
之前进行发射
它不能正常泡了DOM树

可以停止火已经生活在浏览器的缓存图片

来源

2013-04-10 02:55:31 plalx

Thx对你的帮助很大，我是Jquery的新手，如果它不会给你带来麻烦，你能告诉我怎么做吗？！ – user2264246 2013-04-10 03:21:23

@ user2264246，以及我只是在我的答案，但我没有测试，但这就是想法。 – plalx 2013-04-10 03:23:20

@ user2264246，它工作吗？ – plalx 2013-04-10 04:17:31

Jquery加载页面

回答

相关问题