link预加载

link标记的常见使用是css,但是link也可以用来加载资源;

使用方式(as属性在部分loadType的情况下有效)

<link rel="loadType" href="url" as="fileType"   >

做为加载类型的情况下,loadType常见值有:preload、prefetch、prerender;

url常见值有:各种文件(图片、视频,音频,字体等),各种链接地址(如:http://www.baidu.com);

1、preload--预加载

加载类型为文件,有as属性;

优先级较高,在加载好页面后马上开始缓存资源(如果需要资源不是马上使用,不要用,有可能拖慢其它的下载速度,必须马上使用的资源,用它);

2、prefetch--预拉取

加载类型为文件,,有as属性;

优先级较低,不会干扰主要资源的加载(如果需要的资源不是马上使用,就选它);

3、prerender--预渲染(页面)

加载类型为链接,无as属性;

预渲染对内存和流量的消耗都很高,不能加载过多的链接,部分不浏览器不支持;

 

转载于:https://www.cnblogs.com/chjb/p/10705946.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Fusion自带的加载器进行资源加载的示例代码: ```javascript fusion.preload([ // 需要加载的资源 '/images/image1.jpg', '/css/style.css', '/js/script.js' ], function () { // 所有资源加载完成后执行的回调函数 console.log('所有资源加载完成!'); }); ``` 在上面的代码中,`fusion.preload`方法接受两个参数:需要加载的资源数组和所有资源加载完成后执行的回调函数。在这个示例中,我们将需要加载的图片、CSS文件和JavaScript文件的URL放入一个数组中,当所有资源加载完成后,将执行一个简单的`console.log`语句。 如果需要自定义加载器,可以参考以下示例代码: ```javascript var preloader = function (resources, callback) { var loaded = 0; var total = resources.length; var onload = function () { loaded++; if (loaded === total) { callback(); } }; for (var i = 0; i < total; i++) { var resource = resources[i]; var type = resource.split('.').pop(); var element; if (type === 'js') { element = document.createElement('script'); element.src = resource; } else if (type === 'css') { element = document.createElement('link'); element.rel = 'stylesheet'; element.href = resource; } else if (type === 'jpg' || type === 'png' || type === 'gif') { element = new Image(); element.src = resource; } element.onload = onload; document.head.appendChild(element); } }; preloader([ '/images/image1.jpg', '/css/style.css', '/js/script.js' ], function () { console.log('所有资源加载完成!'); }); ``` 在这个示例中,我们定义了一个名为`preloader`的加载器函数,它接受两个参数:需要加载的资源数组和所有资源加载完成后执行的回调函数。在加载器函数中,我们使用了`document.createElement`方法动态创建了需要加载的资源元素,并将它们添加到页面中。当所有资源加载完成后,将执行回调函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值