Question

我在我的第一页上使用Supersized 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()'},
             }
@:],
                      @:});
 @:});
}

我的网站：www.jonasfotograf.se

编辑：我在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()'},
        }
@:],
    @:});
 @:});
}

感谢帮助我朝着正确的方向前进。

Answer 1

最好为不同设备保留不同的图像集以获得更好的性能

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

1 个答案: