帶顯示的元素：無顯示負載

對於跨瀏覽器的確定性等我用了兩個菜單，一個用於桌面和一個用於移動。隨着媒體查詢，我顯示一個，並隱藏另一個。我的問題是，當我按Ctrl + F5或導航到移動版本的另一個頁面時，桌面菜單在加載時顯示幾秒鐘。有任何想法嗎？帶顯示的元素：無顯示負載

來源

2013-07-15 Dale

聽起來像一個JavaScript的東西，你可以請張貼一些代碼？另外，你如何在移動設備上按ctrl + f5 ...？ – David

@David他的意思是通過任何可用的機制'刷新頁面'，但有些平板電腦確實有USB端口，所以如果您插入鍵盤，可以按Control-F5！ –

隱藏你的一般CSS的兩個菜單，並顯示正確的使用媒體查詢/ js – Huangism

這就是所謂的FOUC（未閃爍的內容的閃光）和通常的原因是JavaScript在頁面加載運行。在顯示之前，瀏覽器會暫停顯示幾秒鐘（或十分之一秒）的頁面。通過webpagetest.org和zoompf.com運行您的站點，以確定減慢頁面加載的問題。

爲了在短期內幫助您，請在生成頁面時爲元素添加樣式屬性，並動態設置值（例如，對於PHP：

<div id="desktop-menu" style="display:<?php echo $mobile ? 'none' : 'block'; ?>">

編輯：我剛纔注意到你加了標籤的頁面jquery。據推測，那麼你的代碼隱藏元素這樣的：

$(function(){$('desktop-menu').toggle();});

，當你的網頁瀏覽器有完成頁面加載運行。在這種情況下最好的做法是將CSS diaply:none內聯爲style屬性，並簡單地轉儲jQuery調用。

來源

2013-07-15 12:31:36

感謝很多人，一個問題，即時通訊不太確定如何使用jQuery打開或關閉菜單？以供參考：http://memre.loudcrowd.co.za – Dale

請參閱http://api.jquery.com/category/effects/basics/請注意，您的菜單包裝在我的瀏覽器（Windows上的Chrome，大量的屏幕空間）：http://web.nickshanks.com/stackoverflow/17654251/memre.png –

你確實需要有2個菜單嗎？

我知道自己在TrulyCode.com我有1個菜單，但隨後通過媒體查詢不同風格它，它會從一個基本的菜單欄，到屏幕外側欄移動。

之前你去試圖找到你的2個菜單方式的解決方案，看看你是否能拿到1個菜單適合所有的風格，因爲它會與搜索引擎優化，速度幫助，只是一般更一致。

正如謝霆鋒所說，這只是一個無樣式內容閃爍，瀏覽器已經得到了該項目的HTML，但不是所有的相關的CSS，JS或。

雖然，我不會像尼古拉斯用display:none內嵌建議的那樣去做，就好像JS尚未加載/被阻止/禁用那麼您的用戶將根本沒有菜單！

來源

2013-07-15 12:46:56

非常感謝很多人。嗯，我已經看了幾個動態縮小的響應菜單，然後形成響應菜單，但大多數他們不工作在IE 7中。所以我基本上做的是隱藏桌面版本顯示：無和響應導航顯示：塊 – Dale

你必須支持IE7？我爲你感到難過！ –

是的，它很痛苦。 – Dale

帶顯示的元素：無顯示負載

回答

相關問題