【问题标题】:Is there a way to load different part of the pages at different time in php有没有办法在php中的不同时间加载页面的不同部分
【发布时间】:2012-01-16 15:42:41
【问题描述】:

我正在使用 php 和 javascript,我想做的是在不同的时间加载网页的不同部分,以便首先加载我的标题和侧滑块,然后加载我的中间内容。而且,当用户向下滚动时,只会加载图像。

【问题讨论】:

  • 是的,你可以用 JavaScript 很容易地做到这一点,但不要这样做。将加载留给浏览器,除非您有非常具体的理由这样做。
  • @Brad 怎么做
  • 页面按照源代码的顺序加载。如果您希望标题首先加载,请将其放在身体的顶部。如果您希望侧边栏接下来加载,请将其设为标题下方的下一个代码块,等等...

标签: php javascript html css ajax


【解决方案1】:

您可以非常轻松地使用 jQuery 将内容异步加载到您的页面。

http://api.jquery.com/load/

但你不会在这方面赢得性能,除非你有非常大的内容块要分批加载。

【讨论】:

    【解决方案2】:

    我不认为这就是 PHP 的目的......也不是那样工作的。

    我不会故意延迟加载时间,所以仅仅为了视觉效果而使用 jquery .load() 是不好的做法。如果您只是想要在不同时间加载部件的视觉效果,您可以执行以下操作:

    1. 在头部添加以下脚本。我会在您的样式表之后或之前添加它。
    var thehtml = document.getElementsByTagName('html')[0];
    thehtml.className = 'loading';
    
    function hasClass(ele,cls) {
        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }
    
    function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }
    }
    
    window.onload = function() {removeClass(thehtml, "loading")}
    
    1. 为 .loading 类设置样式:
    .loading #header,
    .loading #sidebar {opacity: 0}
    
    #header,
    #sidebar {opacity: 1; transition: all 3s ease-in-out;}
    

    一旦加载类被删除,这将导致标题和侧边栏淡入。如果您的中间内容包含所有图像,您可以使用像lazy karl 这样的“惰性加载器”。 http://www.karlsteltenpohl.com/blog/,56,

    总的来说,我认为所有延迟加载插件都对性能不利,因为您必须依赖滚动事件,这意味着每次用户滚动页面时 javascript 都会运行一个函数。

    此外,如果您想更好地控制“加载”的时间和顺序,您可以在 window.load 函数中使用 setTimeout() 让元素在不同时间加载。

    如果您选择此解决方案,将会涉及更多 CSS,这将取决于您的个人布局以及您的编码方式。

    【讨论】:

    • 当您在 SO 中的编号列表中有代码时,您必须添加八个空格而不是常规的四个空格,或者考虑列表项的深度的倍数。
    【解决方案3】:

    Sobhagya Mohanty 你应该记住三件重要的事情:

    1) 异步并不意味着最快的性能,而是意味着不阻塞(您的代码执行不会因加载其他资源而被阻塞)。

    2) 由 Javascript 加载的每一个页面对于所有搜索引擎都是不可见的,因此由于您谈论的是网页(而不是 Web 应用程序),因此您将隐藏 Google(和其他 SE)的重要内容。

    3) j-man86 所写的是向页面部分添加效果而不将它们隐藏到搜索引擎的最佳方式。

    最好的问候, 法比奥·布达 http://www.en.netd.it

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-25
      相关资源
      最近更新 更多