blocks|key|408829|text|当页面加载时，图像将被加载并被隐藏。在您的按钮中，单击其style属性变为show+means+visible。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408830|如果你设置样式为display:none;，它将被隐藏；|offset|length|style|CODE|408831|entityMap^0|0|8|D|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

When page load, image will be loaded and will be hidden. In your button click its style property become show means visible. 

If you set style to <code>display:none;</code> it will be hidden;

blocks|key|5520147|text|在这两种情况下，图像都将被加载为(无论您是否可以看到图像，因为可见性或显示)。可见性和显示之间的区别基本上在于元素将在页面中占据的“空间”。有了可见性，元素将保留该空间，即使它是隐藏的。有了display，元素将不会保留空间，其他元素将能够占据该空间。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5520148|如果您不想加载图像，并且只想在按钮被按下时才开始加载，那么一个很好的技巧是将IMG+src属性设置为"data:“或"about:blank”，然后在单击按钮时更改它。这样，您将“欺骗”浏览器，并且它不会在页面加载时加载图像。|5520149|希望这能有所帮助|5520150|entityMap^0|A|6|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

In both scenarios the images will be loaded (regardless if you can see or not the image due to visibility or display). The difference between visibility and display is basically on the "space" the element will occupy in the page.
With visibility the element will keep that space even if it is hidden.
With display the element will not keep the space, other elements will be able to occupy that space.

If you DON'T want the image to be loaded and you want to start loading only when the button is getting pressed then a nice trick to do that is to set the IMG src attribute to "data:" or "about:blank" and then change it on the button click. This way you will "trick" the browser and it will not load the image on page load.

Hope this helps

blocks|key|408850|text|只要img标记在DOM中，它就会加载资源；CSS将确定它是否实际显示。无论你使用的是visibility:+hidden;还是display:none;都不会影响到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|408851|主要区别在于图像是否会占用页面上的任何空间；设置为display:+none;的元素根本不会呈现，而设置为visibility:+hidden;的元素仍将占用其box模型设置的空间。|408852|你可以在这里看到这一点：http://jsfiddle.net/d8NrK/|408853|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/d8NrK/^0|16|J|1R|D|0|P|E|1H|J|0|C|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

As long as the img tag is in the DOM, it will load the resource; the CSS will determine whether or not it is actually displayed. Whether or not you're using <code>visibility: hidden;</code> or <code>display:none;</code> will not affect this.

The main difference is whether or not the image will occupy any space on the page; an element set to <code>display: none;</code> is not rendered at all, whereas an element set to <code>visibility: hidden;</code> will still occupy the space set by its box model.

You can see this in action here: <a href="http://jsfiddle.net/d8NrK/" rel="nofollow">http://jsfiddle.net/d8NrK/</a>

blocks|key|408858|text|更好的方法是使用CSS的display属性来控制可见性和它所占用的空间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|408859|document.getElementById(+'elemtId'+).style.display+=+'none';|code-block|syntax|javascript|408860|或者使用jquery来简化代码。|408861|+$("#elementId").hide();
+$("#elementId").show();|408862|或者使用$('#elementId').toggle()；|408863|参考：-+http://www.w3schools.com/jquery/jquery_hide_show.asp|offset|length|408864|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jquery/jquery_hide_show.asp^0|0|0|0|0|0|5|1G|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

The better is to use the display property of the CSS to control the visibility and the space it occupies. 

<pre><code>document.getElementById( 'elemtId' ).style.display = 'none';
</code></pre>

or use jquery to simplify the code. 

<pre><code> $("#elementId").hide();
 $("#elementId").show();
</code></pre>

or use $('#elementId').toggle();

Ref:- <a href="http://www.w3schools.com/jquery/jquery_hide_show.asp" rel="nofollow">http://www.w3schools.com/jquery/jquery_hide_show.asp</a>

blocks|key|5520223|text|浏览器使用data-src加载所有具有src+attribute.so的图像。以下是您可以执行的操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5520224|<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]%7C%7C"show"].apply(img,+args.splice(1));
++++++++});
++++});
}
})(jQuery);|code-block|syntax|javascript|5520225|现在，在需要时调用此函数。|5520226|我的代码的引用是here|5520227|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3818063/dont-load-hidden-images^0|5|8|J|3|0|0|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

The browser loads all the images who has <code>src</code> attribute.so use <code>data-src</code>. Here is what you can do

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

Now call this function when you need it.

Refrence to my code is <a href="https://stackoverflow.com/questions/3818063/dont-load-hidden-images">here</a>

I am new to javascript. I would like to know how the loading works. Suppose in my html page I have an image whose visibility is set as hidden. I have an button which on click sets the visibility property of the image to visbile using javascript. When the page is loaded will the image load or will it load when the button is clicked. Similiarly I would like to know about the display property whose value is set as none. Thanks in advance.

Will the image load for visibility value set as hidden when the page loads?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是javascript的新手。我想知道加载是如何工作的。假设在我的html页面中有一个图像，它的可见性被设置为隐藏。我有一个按钮，该按钮在单击时使用javascript将图像的可见性属性设置为可视。当页面加载时，将加载图像还是在单击按钮时加载图像。类似地，我想知道值被设置为none的显示属性。提前谢谢。

问当页面加载时，是否会为可见性值设置为隐藏的图像加载？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当页面加载时，是否会为可见性值设置为隐藏的图像加载？EN