0

类似于这个问题防止在响应式网页设计中加载幻灯片的图像

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

我确实知道响应式滑块本质上会缩放到任何东西（我已经看到一些允许您声明最大宽度）......但我希望我能找到一个允许禁用幻灯片的响应式滑块（或者只是不下载图像，如果没有加载图像，我可以使用 css { display: none; }) 使#container 消失。

任何人都可以引导我使用这样的滑块，或者给我看代码来调整一个吗？

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

4

2 回答 2

0

这是一个使用 jQuery 确定窗口高度和宽度的解决方案，如果它们满足最小尺寸，则仅填充 slideContainer 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.");
});
于 2013-07-27T06:46:53.953 回答
0

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

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">

您可以在这里看到它的实际效果。

一个问题是，如果用户打开了 javascript，它不会加载，但如果有必要，你可以替换。

或者，如果您只是使用 CSS 背景图像，请使用媒体查询来消除较小尺寸的背景，这样它就不会加载。

于 2013-07-28T17:56:58.267 回答