zoukankan      html  css  js  c++  java
  • 使用link标签进行预加载

    概述

    html中的link标签一般用来引入css文件。但是也可以通过rel属性来进行预加载。本文记录下相关方法,供以后开发时参考,相信对其他人也有用。

    参考资料:
    mdn 通过rel="preload"进行内容预加载

    基本方法

    一般我们用下面的代码进行预加载背景图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div style="display:none;">
            <img src="pic1.jpg" alt="预加载图片1">
            <img src="pic2.jpg" alt="预加载图片2">
        </div>
    </body>
    </html>
    

    但是上面的方法很繁琐,代码也不容易看懂。值得庆幸的是,可以向下面的示例那样利用link标签进行预加载css,js,image,MP4等资源

    <head>
      <meta charset="utf-8">
      <title>Video preload example</title>
      <link rel="preload" href="style.css" as="style">
      <link rel="preload" href="main.js" as="script">
      <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
    </head>
    <body>
    </body>
    

    其中type是MIME类型,最好写一下。

    基本上你能想到的资源都能放到href里面进行预加载:audio, document, embed, font, image, js, css, worker, video等。

    跨域预加载

    可以通过设置crossorigin属性进行跨域预加载。(同时需要服务器那边进行相应设置)

    <head>
      <meta charset="utf-8">
      <title>Web font example</title>
    
      <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
    </head>
    <body>
    
    </body>
    

    媒体查询预加载

    在预加载的时候还可以进行媒体查询,当屏幕宽度达到某个条件的时候才预加载。

    <head>
      <meta charset="utf-8">
      <title>Responsive preload example</title>
    
      <link rel="preload" href="bg-image-narrow.png" as="image" media="(max- 600px)">
      <link rel="preload" href="bg-image-wide.png" as="image" media="(min- 601px)">
    
      <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <header>
        <h1>My site</h1>
      </header>
    </body>
    

    脚本化预加载

    下面的示例将预加载一个js文件,但并不执行

    var preloadLink = document.createElement("link");
    preloadLink.href = "myscript.js";
    preloadLink.rel = "preload";
    preloadLink.as = "script";
    document.head.appendChild(preloadLink);
    

    下面的示例将执行这个脚本:

    var preloadedScript = document.createElement("script");
    preloadedScript.src = "myscript.js";
    document.body.appendChild(preloadedScript);
    

    与onload进行配合

    下面的例子很巧妙,代码也很精简,值得学习。

    <link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
    
  • 相关阅读:
    【BZOJ1489】[HNOI2009]双递增序列(动态规划)
    【BZOJ1488】[HNOI2009]图的同构(Burside引理,Polya定理)
    【BZOJ4888】[TJOI2017]异或和(树状数组)
    【BZOJ1487】[HNOI2009]无归岛(动态规划)
    【BZOJ1485】[HNOI2009]有趣的数列(组合数学)
    【BZOJ1484】[HNOI2009]通往城堡之路 (贪心)
    【BZOJ1452】[JSOI2009]Count(树状数组)
    【BZOJ1449】[JSOI2009]球队收益(网络流,费用流)
    【BZOJ1444】[JSOI2009]有趣的游戏(高斯消元,AC自动机)
    【BZOJ1434】[ZJOI2009]染色游戏(博弈论)
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9411107.html
Copyright © 2011-2022 走看看