Javascript 使用backstretch.js和blur.js（或类似） 使现代化

我已经回答了下面的问题，但是，它是非常滞后的，图像之间的交叉淡入看起来是阶梯状的。是否有人可以就如何优化这一点提供建议

也许我应该恢复并使用一个随机选择的“静态”图像，直到页面刷新为止

---

问题 我想知道是否有可能，或者是否有人有一个工作的例子来模糊背景图像（可能是背景幻灯片）

目前，我有以下12幅图像，每幅图像显示10秒，然后淡入下一幅。我想能够模糊的背景，如果可能的话。如果图像需要是静态的，我希望它从预定义的列表中随机选择一个图像

下面的工作（我包括blur.js，但是它目前没有任何作用）

我还选择了css3标记，因为我知道一些css3属性会产生模糊效果

<script src="/js/jquery.js"></script>
<script src="/js/backstretch.js" type="text/javascript"></script>
<script src="/js/blur.js"></script>
<script>
$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});
</script>

美元后推([
"https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
"https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
"https://download.unsplash.com/photo-1423882503395-8571951e45cc",
"https://download.unsplash.com/photo-1422433555807-2559a27433bd",
"https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
"https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
"https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
"https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
"https://download.unsplash.com/photo-1425136738262-212551713a58",
"https://download.unsplash.com/photo-1425036458755-dc303a604201",
"https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
"https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
]，{持续时间：3000，衰减时间：1000}）；

---

因此，在创建一个JSFIDLE以显示我已经完成的工作时，我在cdnjs上寻找blur.js，突然发现vague.js

你可以在下面找到一个完整脚本的链接，它非常简单，正如我所希望的那样

$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});

var vague = $('body').Vague({
    intensity:      10,      // Blur Intensity
    forceSVGUrl:    false,   // Force absolute path to the SVG filter,
    // default animation options
    animationOptions: {
      duration: 1000,
      easing: 'linear' // here you can use also custom jQuery easing functions
    }
});

vague.blur();

---

请分享您的尝试，或者安装一个JSFIDLE进行演示。