防止部分html在手機中加載

我已經使用css和媒體查詢，直到現在，以防止加載圖像。現在我必須要求防止部分html，腳本在移動瀏覽器中加載。這裏是我用來阻止加載防止部分html在手機中加載

@media (min-width:601px) { 
    .image { 
     background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg); 
     width:700px; 
     height:350px; 
    } 
}

爲HTML和JavaScript任何建議的圖片？

來源

2014-01-23 Maclean Pinto

您可以通過CDATA或HTML comments防止瀏覽器中的HTML解析。但是您必須更改您的server side/template generated代碼以防止加載任何HTML代碼。

此外，您無法阻止從script標記src屬性中加載腳本。您可以使用window.matchMedia和lazy-load/async加載腳本：

if (window.matchMedia('min-width:601px')) { 
    (function (callback) { 
     var script = document.createElement('script'); 
     script.src ='url'; 
     script.onload = callback; 
     document.documentElement.firstChild.append(script); 
    })(callback/*if needed*/) 
}

或者使用requirejs：

if (window.matchMedia('min-width:601px')) { 
    var someModule = require('moduleName_or_path'); 
}

您也可以使用enquirejs。

來源

2014-01-23 08:58:19 Pinal

偉大的方法。這個特性在requirejs中可用嗎？ –

我編輯我的答案並添加鏈接到[enquirejs]（http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/）。我認爲enquirejs是你需要的。 – Pinal

看看這個： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果你想使用jQuery的JavaScript的： What is the best way to detect a mobile device in jQuery?

當然你會希望在移動設備檢測後，如果要隱藏的元素添加display: none。

來源

2014-01-23 08:55:16 grim

您好，希望阻止它們加載以節省帶寬。不隱藏 –

下面是一些JavaScript代碼，您可以運行該代碼以包含僅限桌面的JS，並從移動瀏覽器中刪除不需要的HTML元素。

if (window.innerWidth > 601) { 
    //Run JS code that is to be loaded only on desktop browsers 
    console.log("This will run only in desktop browsers"); 
} 

if (window.innerWidth < 601) { 
    //Remove HTML elements not to be shown in mobile devices 
    document.getElementById("extra-info").remove(); 

}

來源

2014-01-23 09:03:19

防止部分html在手機中加載

回答

相關問題