Question

与此问题类似Prevent loading of slideshow's images in responsive web design

我想使用某种jquery滑块，它不仅具有响应性，还允许设置禁用某些屏幕尺寸的图像下载。我一直在寻找并且有很多响应式jquery滑块，但是当屏幕尺寸最小时，找不到任何关于不下载图像的说法。

我确实理解响应滑块本质上可以扩展到任何（我已经看到一些允许你声明最大宽度）...但我希望我能找到一个响应滑块，允许禁用幻灯片放映（或者只是不下载图像，如果没有加载图像，我可以使用css {display：none;}使#container消失。

任何人都可以引导我到这样的滑块，或者向我显示要调整的代码吗？

到目前为止，这个似乎是我的最佳选择之一：http://www.woothemes.com/flexslider/

Answer 1

Here是一个使用jQuery来确定窗口高度的解决方案;宽度，只有当它们符合最小尺寸时才填充幻灯片容器div。

var contents = '<div class="flexslider"><ul class="slides"><li><img width="160" height="160" src="http://cdn.howtogeek.com/wp-content/uploads/2012/12/Plain-Black-Wallpaper.png" /></li><li><img width="160" height="160" src="http://eofdreams.com/data_images/dreams/red/red-06.jpg" /></li><li><img width="160" height="160" src="http://4.bp.blogspot.com/_5xJ_jlTUVG4/S_PHdyb_jyI/AAAAAAAABEg/FKj-Z8K-4WM/s320/bigstockphoto_Blue_Brushed_4167376.jpg" /></li></ul></div>';

$(function() {
if ($(window).width() > 600 &&
    $(window).height() > 200) {
    alert("Window wider than 600px and taller than 200px. Loading images and slider!");
    $("#slideContainer").html(contents);
}
else alert("No slider for you.");
});

Answer 2

如果只是图片，那么您可以使用我为我的网站创建的这个代码段：

setTimeout(function() { loadImages(); }, 1000);
    function loadImages() {
        if (window.innerWidth >= 768) {
            $('.load-image').each(function(i,obj) {
                if (!$(this).hasClass('loaded-image')) {
                    var src = $(this).data('src');
                    $(this).attr('src',src).fadeTo(1000,1).removeClass('load-image').addClass('loaded-image');
                }
            });
        }
    }

它运行jQuery，所以如果你还没有使用它并且根本不想使用它，它就不是解决方案。基本上它通过使用非常小的间隔图像（例如~1kb）来使用jQuery替换掉。

语法：<img src="library/pictures/spacer.gif" data-src="fullsize-image" class="load-image">

您可以在行动here中看到它。

但是，如果用户打开了javascript，那么它将无法加载，但如果有必要，您可以替换它。

或者，如果您只是使用CSS背景图片，请使用媒体查询来消除较小尺寸的背景，以免加载。

不希望幻灯片显示为小窗口大小/移动设备加载资源

2 个答案: