是否可以使用ajax/jquery技术预加载页面内容？

是否有可能预加载所有页面内容（如显示加载栏/动画gif ..或加载文本..），直到内容完全加载，然后显示给用户/访客？如果这是可能的，你可以给我只是方向或资源来实现这一目标。因为我能够轻松找到图像预加载器，但我正在寻求一种预加载技术，可以在显示之前预加载页面上的所有内容。是否可以使用ajax/jquery技术预加载页面内容？

来源

2009-04-08 Ahmad Fouad

没有必要为此使用Ajax。只需将页面的包装div display设置为none即可。然后在加载文档时将其更改为block。

您的代码可能是这样的，用香草的javascript：

<script type="text/javascript"> 
    function preloader() { 
     document.getElementById("preloader").style.display = "none"; 
     document.getElementById("container").style.display = "block"; 
    } 

    window.onload = preloader; 
</script> 

<style> 
div#wrapper { 
    display: none; 
} 

div#preloader {    
    top: 0; right: 10px; 
    position:absolute; 
    z-index:1000; 
    width: 132px; height: 38px; 
    background: url(path/to/preloaderBg.png) no-repeat; 
    cursor: wait; 
    text-shadow: 0px 1px 0px #fefefe; //webkit     
} 
</style> 

<body> 
    <div id="preloader">Loading... Please Wait.</div> 
    <div id="wrapper"> 
     <!-- page contents goes here --> 
    </div> 
</body>

更新，jQuery中：

<script type="text/javascript"> 
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc. 
    $(document).ready(function(){ 
     $("#preloader").hide(); 
     $("#container").show(); 
    }); 
</script>

相关文档：事件/ ready，活动/ load，CSS/css & Core/$

来源

2009-04-08 03:06:27 sepehr

DIV [ID = “X”]？当然只是#x？ – bobince 2009-04-08 09:09:20

我做了一些事情，我需要知道图像何时被完全加载，所以我用$.get()函数进行了预加载，并且传递了一个回调函数作为最后一个参数。这样，当图像被实际下载时，我的回调会触发，并且我知道浏览器已经将图像存储在缓存中。

您可以编写一个函数，用于为每个图像增加一个全局变量，以指示它预加载，然后您的回调可以递减计数器。当计数器归零时，调用另一个函数。这个功能现在将在所有图像被预加载后触发。

这是图像。 $（document）.ready（）被触发时，其他所有内容都可以保证被加载。所以，如果你现在开始你的例程，那么页面上的所有内容都应该被加载。

来源

2009-04-08 02:24:41 Rich

如果选择隐藏内容直到整个页面加载的方法，则不要将其初始隐藏在CSS中，然后在JavaScript中隐藏。如果你这样做，JavaScript禁用或不可用的任何人都不会得到任何页面。相反，请同时执行隐藏和脚本显示。

<body> 
    <script type="text/javascript"> 
     document.body.style.visibility= 'hidden'; 
     window.onload= function() { document.body.style.visibility= 'visible'; }; 
    </script>

另请注意，术语'preloader'并不是真正适合你在这里做的事。 'pre'意味着你通过获取和缓存页面来提高性能，以便在需要的时候准备好。

但实际上这是相反的：它减少性能通过等待显示用户什么都没有，而页面加载时，当部分内容可用。击败渐进渲染使得浏览速度变慢，而不是更快。它通常明显是错误的东西，除了少数情况下，使用普通浏览器渐进渲染的情况是最好的。这就是网络的工作原理;现在人们习惯了。

（人，即，除了那种谁不真正理解和使用网络，但要求他们的公司的网站出现一次全部愚笨的管理类型。）

来源

2009-04-08 09:28:08 bobince

你可以这样做与jQuery容易。

SCRIPT


$(window).load(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

STYLES


div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

 
div id="preloader"

来源

2010-11-15 08:14:56

最佳方式

 
function ajax(){ 
$('#wapal').html('path to image'); 
$.ajax({ 
     url:'somfile.php', 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     $('#wapal').html(data); 
     } 
    }); 
}

来源

2011-01-13 12:43:05

对DMus -Jerad的一些修改当adsense在页面上时，它不起作用。

你可以轻松地用jQuery来做到这一点。

SCRIPT

$(document).ready(function() { 
    $('#preloader').fadeOut('slow', function() { $(this).remove(); }); 
});

STYLES

div#preloader { 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; 
}

HTML

div id="preloader"

来源

2012-06-23 13:23:07 tamal3053

是否可以使用ajax/jquery技术预加载页面内容？

回答

相关问题