Jquery 如何提高全屏图像背景的速度？

在我的第一页上，我使用了

超大jQuery

插件作为全屏图像滑块

如何提高速度，特别是在移动设备上

除非是绝对必要的，否则我宁愿不把画质降低得比我所做的更多。是否可以只加载第一个图像或前三个图像或类似的内容，然后加载其他图像

我正在使用

umbraco

和

.mvc

razor在图像中循环

<script type="text/javascript">
@{

    var mediaID1 = Model.Content.GetProperty("images").Value.ToString().Split(',');
    @:jQuery(function($){
    @:$.supersized({
        @:slideshow         :   1,          // Slideshow on/off
        @:autoplay          :   1,          // Slideshow starts playing automatically
        @:start_slide       :   0,          // Start slide (0 is random)
        @:slide_interval    : 3000,              // Length between transitions
        @:fit_always        :0,
        @: slides: [
                     foreach (var mediaID in mediaID1){
            var media = umbraco.uQuery.GetMedia(mediaID);

    @:{ image: '@media.GetImageUrl()'},
             }
@:],
                      @:});
 @:});
}

@{
var mediaID1=Model.Content.GetProperty（“images”）.Value.ToString（）.Split（'，'）；
@：jQuery（函数（$）{
@：$。超大({
@：幻灯片放映：1，//幻灯片放映打开/关闭
@：autoplay:1，//幻灯片自动开始播放
@：开始\幻灯片：0，//开始幻灯片（0是随机的）
@：滑动间隔：3000，//过渡之间的长度
@：fit_始终为：0，
@：幻灯片：[
foreach（mediaID1中的变量mediaID）{
var media=umbraco.uQuery.GetMedia（mediaID）；
@：{image:'@media.GetImageUrl（）'}，
}
@:],
@:});
@:});
}

我的网站：

编辑：我在umbraco中添加了一个新字段，我上传了最大宽度为400px的图片，那里只有5张图片，当宽度小于400px时我会加载这些图片。然而，我可能已经降低了图像的质量有点太多，但你对这个解决方案还有什么看法

<script type="text/javascript">
if (window.matchMedia("(max-width: 460px)").matches)
{
    @{


      var mediaID5 = Model.Content.GetProperty("mobileimages").Value.ToString().Split(',');
    @:jQuery(function($){
                @:$.supersized({
                        @:slideshow         :   1,          // Slideshow on/off
                        @:autoplay          :   1,          // Slideshow starts playing automatically
                        @:start_slide       :   0,          // Start slide (0 is random)
                        @:slide_interval    : 3000,              // Length between transitions
                        @:fit_always        :0,
                        @: slides: [
                                     foreach (var mediaID in mediaID5){
            var media = umbraco.uQuery.GetMedia(mediaID);

    @:{ image: '@media.GetImageUrl()'},
                             }
@:],
                                      @:});
             @:});
                 }
}
else
@{


    var mediaID1 = Model.Content.GetProperty("images").Value.ToString().Split(',');
    @:jQuery(function($){
        @:$.supersized({
            @:slideshow         :   1,          // Slideshow on/off
        @:autoplay          :   1,          // Slideshow starts playing automatically
        @:start_slide       :   0,          // Start slide (0 is random)
        @:slide_interval    : 3000,              // Length between transitions
        @:fit_always        :0,
        @: slides: [
                     foreach (var mediaID in mediaID1){
            var media = umbraco.uQuery.GetMedia(mediaID);

        @:{ image: '@media.GetImageUrl()'},
        }
@:],
    @:});
 @:});
}

if（window.matchMedia（（（最大宽度：460px）”）.matches）
{
@{
var mediaID5=Model.Content.GetProperty（“mobileimages”）.Value.ToString（）.Split（'，'）；
@：jQuery（函数（$）{
@：$。超大({
@：幻灯片放映：1，//幻灯片放映打开/关闭
@：autoplay:1，//幻灯片自动开始播放
@：开始\幻灯片：0，//开始幻灯片（0是随机的）
@：滑动间隔：3000，//过渡之间的长度
@：fit_始终为：0，
@：幻灯片：[
foreach（mediaID5中的var mediaID）{
var media=umbraco.uQuery.GetMedia（mediaID）；
@：{image:'@media.GetImageUrl（）'}，
}
@:],
@:});
@:});
}
}
其他的
@{
var mediaID1=Model.Content.GetProperty（“images”）.Value.ToString（）.Split（'，'）；
@：jQuery（函数（$）{
@：$。超大({
@：幻灯片放映：1，//幻灯片放映打开/关闭
@：autoplay:1，//幻灯片自动开始播放
@：开始\幻灯片：0，//开始幻灯片（0是随机的）
@：滑动间隔：3000，//过渡之间的长度
@：fit_始终为：0，
@：幻灯片：[
foreach（mediaID1中的变量mediaID）{
var media=umbraco.uQuery.GetMedia（mediaID）；
@：{image:'@media.GetImageUrl（）'}，
}
@:],
@:});
@:});
}

---

感谢帮助我正确的方向。

< P>更好的是保持不同的图像对不同的设备，以更好的性能< /P>你可能想考虑删除滑块一起为移动设备。尤其是打电话的人不会对这个感兴趣。不过平板电脑是另一回事。不确定这是否适用于您，但有一件事需要研究，那就是在JavaScript中使用

window.matchMedia

使用媒体查询。这样，您可以按大小范围加载不同的图像集。您不必覆盖所有设备的所有尺寸，只需指定2-3组范围即可。大图像在移动设备上的加载速度会变慢并导致性能问题，您应该准备一些较小版本的图像，检测用户的屏幕分辨率并加载适当的图像。除了一般移动设备性能较低（处理、内存）外，您还可以处理较低的带宽问题。是的，您可以在后台预加载图像，但这里的问题是图像的大小和所需的处理。预加载基本上是将图像加载到隐藏的dom元素（css_hidden:{position:absolute；top:-9999px，left-9999px}），通过这种方式加载、缓存图像并可以重用，或者你可以在需要时使用隐藏元素来交换图像。我编辑了我的原始帖子并写道：编辑：我在umbraco中添加了一个新字段，我上传了最大宽度为400px的图片，那里只有5幅图像，当宽度小于400px时我会加载这些图像。然而，我可能已经降低了图像的质量有点太多，但你对这个解决方案还有什么看法？