Web App图像预加载设置在2分钟内

预加载Web App资源以提高速度。 相信我，它的工作原理和实现过程大约需要2分钟。 现代浏览器会在插件加载后缓存您的资产，因此仅在初始加载时才真正使用它（请参见下面的屏幕截图）。 您的网络应用程序中不再需要加载裸奔图像！ 该插件还可以用于预加载其他内容，例如脚本，音频，视频等。您还可以在单​​个项目上设置回调。 那是另一篇文章，敬请期待！

设定步骤

• 包括preload.js插件
• 创建图像的加载清单
• （可选）：显示加载进度表
• （可选）：在完成的加载回调中执行操作

进度条的代码示例

manifest = [

    "/img/logo.jpg",
    "/assets/image1.jpg"
    "/assets/image2.jpg"
    "/assets/image3.jpg"
     //etc...

];

// Create a preloader. There is no manifest added to it up-front, we will add items on-demand.
preload = new createjs.LoadQueue(true, ""); //change "" to add base path

//show progress
var $mainProgress = $("#mainProgress"),
    $progressBar = $mainProgress.find('.progress');
$progressBar.width(0);
preload.addEventListener("progress", function()
{
       console.log('Updating preloading progress...'+Math.round(preload.progress*100)+"%");
       $progressBar.width(preload.progress * $mainProgress.width());
});

//complete callback
preload.addEventListener("complete", function()
{
    console.log('ASSETS PRELOADED...');
});

preload.setMaxConnections(5);
preload.loadManifest(manifest);

初始页面加载。

第二页加载（刷新）。

设置lugin助手代码/示例：

如果遇到困难，这些资源将帮助您扩展。

• PreloadJS /示例/ PreloadImages.html – https://github.com/CreateJS/PreloadJS/blob/master/examples/PreloadImages.html
• LoadQueue类API – http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html
• 媒体网格预加载– http://www.createjs.com/#!/PreloadJS/demos/mediaGrid

From: https://www.sitepoint.com/web-app-image-preloading-setup-2mins/