Heim Web-Frontend js-Tutorial 预加载css或javascript的js代码_javascript技巧

预加载css或javascript的js代码_javascript技巧

May 16, 2016 pm 06:28 PM
css javascript 预加载

预加载文件一般有两种常用的方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块),然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制,且如今网站的静态文件都是部署在cdn服务器上,如何预加载css js文件也变有点玄妙了。

Stoyan Stefanov 撰文简明的阐述了一种加载文件而不会让之执行的方法。原文可见 http://www.phpied.com/preload-cssjavascript-without-execution/

具体的方法是,ie中使用 new Image().src 去预加载文件,而其他浏览器使用动态插入的 标签来完成加载。
部分代码如下

复制代码 代码如下:

window.onload = function () {

var i = 0,
max = 0,
o = null,

// list of stuff to preload
preload = [
'http://tools.w3clubs.com/pagr2/.sleep.expires.png',
'http://tools.w3clubs.com/pagr2/.sleep.expires.js',
'http://tools.w3clubs.com/pagr2/.sleep.expires.css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0;

for (i = 0, max = preload.length; i
if (isIE) {
new Image().src = preload[i];
continue;
}
o = document.createElement('object');
o.data = preload[i];

// IE stuff, otherwise 0x0 is OK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden";
//o.type = "text/plain"; // IE
o.width = 0;
o.height = 0;

// only FF appends to the head
// all others require body
document.body.appendChild(o);
}
};

demo 可见 http://phpied.com/files/object-prefetch/page1.php?id=1

几点说明:
1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。

2. 动态插入的 object 标签需要插入到非 head部分,以触发加载。

3. ie7 ie8 也可以通过一些代码使用动态object加载文件(代码注释中有提到)。但是作者发现object 通常会消耗很大, so...


通过自身的实验发现相当不错的,有需求的同学不妨一试。

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Apr 05, 2025 pm 10:33 PM

Mit lokal installierten Schriftdateien auf Webseiten kürzlich habe ich eine kostenlose Schriftart aus dem Internet heruntergeladen und sie erfolgreich in mein System installiert. Jetzt...

Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Apr 05, 2025 pm 11:24 PM

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Bedarf die Produktion von H5 -Seiten eine kontinuierliche Wartung? Apr 05, 2025 pm 11:27 PM

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Wie kann ich mit mehreren Überlaufverlusten am mobilen Terminal kompatibel? Wie kann ich mit mehreren Überlaufverlusten am mobilen Terminal kompatibel? Apr 05, 2025 pm 10:36 PM

Kompatibilitätsprobleme des Multi-Reis-Überlaufs auf mobilen Terminal auf verschiedenen Geräten bei der Entwicklung mobiler Anwendungen mit VUE 2.0 begegnen Sie häufig auf die Notwendigkeit, den Text zu überfließen ...

Wie kann man den Stil verschachtelter Divelemente effizient verändern? Wie kann man den Stil verschachtelter Divelemente effizient verändern? Apr 05, 2025 pm 10:45 PM

Eingehende Diskussion über verschachtelte Methoden zur Änderung des Div-Stils In diesem Artikel wird detailliert erklärt, wie der Div-Element-Stil von verschachtelten Strukturen effektiv geändert werden kann. Die Herausforderung, vor der wir stehen, ist, wie ...

Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Welche Anwendungsszenarien eignen sich für die H5 -Seitenproduktion Apr 05, 2025 pm 11:36 PM

H5 (HTML5) eignet sich für leichte Anwendungen wie Marketingkampagnen, Produktdisplayseiten und Micro-Websites für Unternehmenswerbung. Seine Vorteile liegen in plattformartigen und reichhaltigen Interaktivität, aber seine Einschränkungen liegen in komplexen Interaktionen und Animationen, lokalen Ressourcenzugriff und Offline-Funktionen.

Was sind die Vorteile der H5 -Seitenproduktion Was sind die Vorteile der H5 -Seitenproduktion Apr 05, 2025 pm 11:48 PM

Die Vorteile der H5 -Seitenproduktion umfassen: Leichte Erfahrung, schnelle Ladegeschwindigkeit und Verbesserung der Benutzerbindung. Die plattformübergreifende Kompatibilität ist nicht erforderlich, um sich an verschiedene Plattformen anzupassen und die Entwicklungseffizienz zu verbessern. Flexibilität und dynamische Updates, kein Audit erforderlich, was die Änderung und Aktualisierung von Inhalten erleichtert. Kosteneffektive, niedrigere Entwicklungskosten als native Apps.

Wie man mit H5 Fortschrittsbalken macht Wie man mit H5 Fortschrittsbalken macht Apr 06, 2025 pm 12:09 PM

Erstellen Sie eine Fortschrittsleiste mit HTML5 oder CSS: Erstellen Sie einen Fortschrittsbalkenbehälter. Stellen Sie die Fortschrittsbalkenbreite ein. Erstellen Sie interne Elemente der Fortschrittsleiste. Legt die interne Elementbreite der Fortschrittsleiste fest. Verwenden Sie JavaScript, CSS oder Fortschrittsbalkenbibliothek, um den Fortschritt anzuzeigen.

See all articles