7

私はjavascriptが初めてです。ロードの仕組みを知りたいです。私のhtmlページに、可視性が非表示に設定されている画像があるとします。クリックすると、JavaScriptを使用して画像の可視性プロパティを可視に設定するボタンがあります。ページが読み込まれると、画像が読み込まれるか、ボタンがクリックされたときに読み込まれます。
同様に、値が none に設定されている display プロパティについて知りたいです。
前もって感謝します。

4

5 に答える 5

9

どちらのシナリオでも、画像が読み込まれます (可視性または表示のために画像が表示されるかどうかに関係なく)。可視性と表示の違いは、基本的に要素がページ内で占める「スペース」にあります。可視性があれば、要素は非表示であってもそのスペースを保持します。表示では、要素はスペースを保持せず、他の要素がそのスペースを占有できます。

画像をロードしたくなくて、ボタンが押されたときだけロードを開始したい場合は、IMG src 属性を「data:」または「about:blank」に設定し、次に、ボタンのクリックで変更します。このようにしてブラウザを「だます」と、ページの読み込み時に画像が読み込まれなくなります。

お役に立てれば

于 2013-09-12T06:48:03.860 に答える
1

ページが読み込まれると、画像が読み込まれ、非表示になります。ボタンをクリックすると、そのスタイルプロパティが表示され、表示されます。

スタイルをdisplay:none;に設定すると、非表示になります。

于 2013-09-12T06:45:11.350 に答える
0

img タグが DOM にある限り、リソースが読み込まれます。CSS は、実際に表示されるかどうかを決定します。使用しているかどうかvisibility: hidden;にかかわらdisplay:none;ず、これには影響しません。

主な違いは、画像がページ上のスペースを占有するかどうかです。に設定された要素display: none;はまったくレンダリングされませんが、 に設定された要素visibility: hidden;は、ボックス モデルによって設定されたスペースを占有します。

ここで実際にこれを見ることができます: http://jsfiddle.net/d8NrK/

于 2013-09-12T06:52:05.023 に答える
0

srcブラウザは、 attribute.so useを持つすべての画像を読み込みますdata-src。これがあなたができることです

<img class="hidden" data-src="url/to/image.jpg" />
(function($){
$.fn.reveal = function(){
    var args = Array.prototype.slice.call(arguments);
    return this.each(function(){
        var img = $(this),
            src = img.data("src");
        src && img.attr("src", src).load(function(){
            img[args[0]||"show"].apply(img, args.splice(1));
        });
    });
}
})(jQuery);

必要なときにこの関数を呼び出します。

私のコードへの参照はここにあります

于 2015-11-10T05:05:27.063 に答える
0

CSS の display プロパティを使用して、可視性と占有スペースを制御することをお勧めします。

document.getElementById( 'elemtId' ).style.display = 'none';

または jquery を使用してコードを簡素化します。

 $("#elementId").hide();
 $("#elementId").show();

または $('#elementId').toggle(); を使用します。

参照:- http://www.w3schools.com/jquery/jquery_hide_show.asp

于 2013-09-12T06:54:33.757 に答える