0

この質問に似ていますレスポンシブ Web デザインでのスライドショーの画像の読み込みを防止する

レスポンシブなだけでなく、特定の画面サイズでの画像のダウンロードを無効にする設定を可能にする、ある種の jquery スライダーを使用したいと考えています。私は検索を続けており、レスポンシブなjqueryスライダーがたくさんありますが、画面が最小サイズのときに画像をダウンロードしないと言っているものは見つかりません.

レスポンシブスライダーは本質的に何にでもスケーリングされることを理解しています（そして、最大幅を宣言できるものを見てきました）...しかし、スライドショーを無効にできるレスポンシブスライダーを見つけられたらいいのにと思います（または、そうではありません画像をダウンロードし、画像が読み込まれていない場合は css { display: none; }) を使用して #container を非表示にすることができます。

誰かが私をそのようなスライダーに誘導したり、スライダーを調整するためのコードを表示したりできますか?

これは、これまでのところ私のトップオプションの1つに思えました: http://www.woothemes.com/flexslider/

4

2 に答える 2

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 で実行されるため、まだ使用しておらず、まったく使用したくない場合は解決策ではありません。基本的には、jQuery を使用して置き換えられる非常に小さい (たとえば ~1kb) スペーサー イメージを使用することで機能します。

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

ここで実際の動作を見ることができます。

ただし、ユーザーが JavaScript をオンにしている場合は読み込まれないという注意点がありますが、必要に応じて別の方法で切り替えることもできます。

または、CSS の背景画像のみを使用している場合は、メディアクエリを使用して小さいサイズの背景を削除し、読み込まれないようにします。

于 2013-07-28T17:56:58.267 に答える
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 に答える