在display-none情況下GIF不會被render

今天看到了gif在display:block 竟然動畫才開始動
查了一下下，原來這跟render有關係
在此做一下筆記…

“display:none” is Your Friend
If you use display:none on the GIF’s html tag, the GIF will not be rendered at all, and will not use any CPU or GPU resources. See this and this for explanations.
html - Does hiding an animated GIF with CSS conserve browser resources? - Stack Overflow

display:none; elements are not in the render tree all, so they will perform better at face value.
https://stackoverflow.com/a/11757103
How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks
前端新手村 都市傳說之隱藏元素的手法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

有在javascript - Proper way to reset a GIF animation with display:none on Chrome - Stack Overflow
看到使用JSFiddleFirefox,IE都會重置
但是CHROME不會…
有在裡面文章找到解法https://stackoverflow.com/a/21104927
http://jsfiddle.net/F8Q44/19/

1
2
3

$('img').show().each(function() {
    this.offsetHeight;
}).prop('src', 'image src');

這個問題好像是我之前寫的render問題解決方法…
[JavaScript] 網頁渲染的過程 (rendering pipline) « 進擊的程式新手

常使用prop用在checked上面，不過今天看到這個用法
查看了一下官網文件

It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected. Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

有些以前沒辦法控制selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected.這些東西
不過現在jQuery可以用prop抓到資訊

javascript - jquery .prop(‘defaultSelected’) seems to malfunction in IE9 - Stack Overflow

1
2
3
4

<form action="">
  <input type="checkbox" name="" id="" checked>
  <input type="reset" value="test">
</form>

elements of type “reset” are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
很多網站教清空表單
但其實正確要說還原表單預設值
(怎麼會寫到這個，因為玩到checkbox,defaultSelected就突然想到reset問題，結果不出所料)

結論沒事還是不要用gif做倒數計時…