Question

我有一个单页网站，这是一个全年的图像日历。页面加载有344个请求和20MB总加载。这是一个没有数据库的简单PHP页面。

请求包括一个CSS文件（15KB），4个JS文件（20KB），两个字体（50KB），一个视频（3MB），其余的是图像。最大图像大小为400x200（139KB），但大多数为200x400（30KB）。图像当前作为CSS背景加载，但可以加载，就好像它有帮助。

这些文件将托管在基于云的CDN上。该页面尽可能地优化，以防止DOM被加载。图像是主要问题，IMO。

加载此网页图片的最佳方式是什么？

我尝试过延迟加载，但问题是它在重绘和重排时真的杀死了浏览器。由于重绘/重排问题，我已经删除了一堆像CSS3样式，动画和其他类似的铃声和口哨。

我能想到的当前选项是一个无限滚动，每个月在每个月之前加载或分解到他们自己的页面。如果可能的话，我宁愿不跟后者去。

在Stack上有一些与此类似的问题，但没有一个与我的情况有关。提前感谢您的建议。

Answer 1

以下是我如何使用自己的实现修复此问题，类似于无限滚动。此示例使用january.php作为登录页面，并且在用户滚动到当前月末之后每个连续月份加载。它附加在元素上。这是最终结果：

http://axcient.com/year-in-review-2014/

<强> JS

＆＃13;

    var index = 1;
	var sections = [
		'january',
		'february',
		'march',
		'april',
		'may',
		'june',
		'july',
		'august',
		'september',
		'october',
		'november',
		'december'
    ];
    	var fetchMore = function (){
           if ( $(window).scrollTop() >= $(document).height() - $(window).height() - 300 ){
                $(window).unbind('scroll',fetchMore);
                if (index < sections.length) {
                	$.post('/load.php', {'section': sections[index] },
    		            function(content) {
    		                if (content.length > 0) {
    		                    $(content).insertAfter($('article:last'));
    		                    init_isotope();
    		                    init_waypoint(sections[index]);
    		                    $(window).bind('scroll',fetchMore);
    		                    index++;
    		                }
    		            }
    	        );
                }
            }
    	}
    	$(window).bind('scroll', fetchMore);

＆＃13;

<强> january.php

＆＃13;

    <?php ?>
    <html>
      <head>
      </head>
      <body>
        This is your landing page
        <article class="january">
          some content
        </article>
      </body>
    </html>

＆＃13;

<强> february.php

＆＃13;

    <?php ?>
    <article class="february">
      some content
    </article>

＆＃13;

<强> load.php

＆＃13;

<?php

$sections = array('january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december');
$section = $_POST['section'];

$template_path = substr($_SERVER['REQUEST_URI'], 0, strrpos($_SERVER['REQUEST_URI'], '/annual-report-2014/'));

if (!empty($section) && in_array($section, $sections) && file_exists($section . '.php')) {
	include($section . '.php');
}

die();

?>

＆＃13;

加载20MB +网页的最有效方式

1 个答案: