【美高梅开户网址】实现图片预加载的三大方法及优缺点分析,JavaScript及Ajax达成图片预加载的三大办法

别天真了,第壹方 CSS 并不安全

2018/03/07 · CSS ·
安全

初稿出处:
Jake   译文出处:[众成翻译

  • KING]()   

不久前一段时间,关于 经过 CSS 创制“keylogger”(键盘记录器)
的议论很多。

稍加人呼吁浏览器厂商去“修复”它。有个别人则深入切磋,表示它仅能影响通过类
React 框架建立的网站,并指责
React。而真正的标题却在于认为第①方内容是“安全”的。

预加载图片是增高用户体验的一个很好点子。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并分享到相当的慢的加载速度。这对图片画
廊及图片占据十分大比例的网站来说尤其福利,它保险了图片飞速、无缝地揭露,也可扶助用户在浏览你网站内容时得到更好的用户体验。本文将分享五个例外的预加
载技术,来抓好网站的习性与可用性。 

预加载图片是做实用户体验的三个很好办法。图片预先加载到浏览器中,访问者便可顺遂地在您的网站上冲浪,并享受到一点也不慢的加载速度。那对图纸画廊及图片占据一点都不小比重的网站的话卓殊方便人民群众,它保证了图片不慢、无缝地宣布,也可扶助用户在浏览你网站内容时得到更好的用户体验。本文将享受四个不等的预加载技术,来升高网站的性子与可用性。

预加载图片是增强用户体验的三个很好法子。图片预先加载到浏览器中,访问者便可顺遂地在你的网站上冲浪,并分享到相当的慢的加载速度。那对图纸画廊及图片占据一点都不小比重的网站以来十二分有利,它保障了图片赶快、无缝地揭破,也可帮助用户在浏览你网站内容时收获更好的用户体验。本文将分享四个例外的预加载技术,来拉长网站的品质与可用性。

其三方图片

<img src=”;

1
<img src="https://example.com/kitten.jpg">

假如小编将上述代码引入作者的文件中,即表示信任
example.com。对方大概会删除能源,给自个儿一个404,导致网站不完全,从而破坏这种信任关系。可能,他们可能会用别的非预期的数目来顶替小猫图片的数目。

然则,图片的影响仅限于成分自己的内容区域。笔者能够向用户解释并希望用户相信,“此处的始末出自
example.com,假若它有误,则是原站点的题材,并不是本站造成的”。但那一个标题一定不会影响到密码输入框等剧情。

办法一:用CSS和JavaScript完结预加载

达成预加载图片有不少方式,包蕴利用CSS、JavaScript及二者的各样组合。那一个技术可依照分歧规划场景设计出相应的缓解方案,拾贰分高速。

偏偏运用CSS,可简单、高效地预加载图片,代码如下:

Html代码  

  1. #preload-01 { background: url() no-repeat -9999px -9999px; }  
  2. #preload-02 { background: url() no-repeat -9999px -9999px; }  
  3. #preload-03 { background: url() no-repeat -9999px -9999px; }
      

将那四个ID选取器应用到(X)HTML成分中,我们便可透过CSS的background属性将图片预加载到显示屏外的背景上。只要这几个图片的路径
保持不变,当它们在Web页面包车型地铁其他地点被调用时,浏览器就会在渲染进度中央银行使预加载(缓存)的图片。简单、高效,不供给此外JavaScript。 

该方法就算不慢,但仍有改进余地。使用该法加载的图样会同页面包车型客车别的内容一起加载,扩张了页面的完好加载时间。为了消除这一个标题,大家增添了一部分JavaScript代码,来延缓预加载的日子,直到页面加载完结。代码如下:

Js代码  

  1. // better image preloading  
  2. function preloader() {  
  3.     if (document.getElementById) {  
  4.         document.getElementById(“preload-01”).style.background = “url() no-repeat -9999px -9999px”;  
  5.         document.getElementById(“preload-02”).style.background = “url() no-repeat -9999px -9999px”;  
  6.         document.getElementById(“preload-03”).style.background = “url() no-repeat -9999px -9999px”;  
  7.     }  
  8. }  
  9. function addLoadEvent(func) {  
  10.     var oldonload = window.onload;  
  11.     if (typeof window.onload != ‘function’) {  
  12.         window.onload = func;  
  13.     } else {  
  14.         window.onload = function() {  
  15.             if (oldonload) {  
  16.                 oldonload();  
  17.             }  
  18.             func();  
  19.         }  
  20.     }  
  21. }  
  22. addLoadEvent(preloader);  

在该脚本的率先局地,大家获得使用类选拔器的成分,并为其安装了background属性,以预加载不相同的图纸。

该脚本的第叁局部,我们使用addLoad伊芙nt()函数来贻误preloader()函数的加载时间,直到页面加载完成。

就算JavaScript不可能在用户的浏览器中不奇怪运转,会产生什么?很简短,图片不会被预加载,当页面调用图片时,不荒谬展现即可。 

方法一:用CSS和JavaScript完毕预加载

主意一:用CSS和JavaScript实现预加载

其三方脚本

JavaScript

<script src=”;

1
<script src="https://example.com/script.js"></script>

与图片相比,第壹方脚本则有越多的控制权。假若自身将上述代码引入作者的公文中,则意味着自个儿赋予了
example.com 完全控制本人的网站的权柄。该脚本能:

  • 读取/修改页面内容。
  • 监听用户的兼具交互。
  • 运维费用多量划算财富的代码(如 cryptocoin 挖矿程序)。
  • 通过向本站发请求,这样能附带用户的
    cookie,转载响应。(译注:盗取用户的 cookie 及其他数据)
  • 读取/修改本地存款和储蓄。
  • ……可以做其余对方想做的事体。

“本地存款和储蓄”分外首要。如若脚本通过 IndexedDB 或缓存 API
发起攻击,则便是在剔除脚本后,攻击仍只怕在全部站点内连续存在。

比方你引入了其余站点的本子,则必须断然信任对方及对方的防备能力。

若果你面临恶意脚本的口诛笔伐,则可设置 Clear-Site-Data
header(清空站点数据响应头)
清除站点全体数据。

方式二:仅使用JavaScript实现预加载

上述办法有时的确很便捷,但大家稳步察觉它在事实上落实进程中会费用太多时光。相反,小编更爱好使用纯JavaScript来促成图片的预加载。下边将提供二种那样的预加载方法,它们可以很美丽貌地干活于具有现代浏览器之上。 

JavaScript代码段1

只需容易编辑、加载所须求图片的门路与名称即可,很简单达成:

Html代码  

  1. <div>  
  2.     <script type=”text/javascript”>  
  3.         <!–//–><![CDATA[//><!– 
  4.         var images = new Array() 
  5.             function preload() { 
  6.                 for (i = 0; i < preload.arguments.length; i++) { 
  7.                     images[i] = new Image() 
  8.                     images[i].src = preload.arguments[i] 
  9.                 } 
  10.             } 
  11.             preload( 
  12.                 “”, 
  13.                 “”, 
  14.                 “” 
  15.             ) 
  16.         //–><!]]>  
  17.      </script>  
  18. </div>  

该形式尤其适用预加载多量的图形。小编的画廊网站使用该技术,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,当先1/3画廊图片将被预加载。 

JavaScript代码段2

该措施与地点的情势类似,也得以预加载任意数量的图形。将下边的剧本添参加其它web页中,根据程序指令展开编写制定即可。

Html代码  

  1. <div>  
  2.     <script type=”text/javascript”>  
  3.         <!–//–><![CDATA[//><!–  
  4.         if (document.images) { 
  5.                 img1 = new Image(); 
  6.                 img2 = new Image(); 
  7.                 img3 = new Image(); 
  8.                 img1.src = “”; 
  9.                 img2.src = “”; 
  10.                 img3.src = “”; 
  11.             } 
  12.         //–><!]]>  
  13.     </script>  
  14. </div>  

 

正如所看见,每加载1个图纸都亟待创制三个变量,如“img1 = new
Image();”,及图影片来源地址评释,如“img3.src
=“../path/to/image-003.gif”;”。参考该格局,你可依照需求加载任意多的图片。

作者们又对该格局开始展览了改正。将该脚本封装入二个函数中,并使用
addLoad伊芙nt(),延迟预加载时间,直到页面加载完结。

Js代码  

  1. function preloader() {  
  2.     if (document.images) {  
  3.         var img1 = new Image();  
  4.         var img2 = new Image();  
  5.         var img3 = new Image();  
  6.         img1.src = “”;  
  7.         img2.src = “”;  
  8.         img3.src = “”;  
  9.     }  
  10. }  
  11. function addLoadEvent(func) {  
  12.     var oldonload = window.onload;  
  13.     if (typeof window.onload != ‘function’) {  
  14.         window.onload = func;  
  15.     } else {  
  16.         window.onload = function() {  
  17.             if (oldonload) {  
  18.                 oldonload();  
  19.             }  
  20.             func();  
  21. 【美高梅开户网址】实现图片预加载的三大方法及优缺点分析,JavaScript及Ajax达成图片预加载的三大办法。        }  
  22.     }  
  23. }  
  24. addLoadEvent(preloader);   

福衢寿车预加载图片有成都百货上千格局,包涵使用CSS、JavaScript及二者的各样组合。这几个技术可依照差异规划场景设计出相应的缓解方案,13分快捷。
单独运用CSS,可不难、高效地预加载图片,代码如下:

达成预加载图片有诸多艺术,包含利用CSS、JavaScript及双方的各样组合。这一个技巧可根据分化规划场景设计出相应的消除方案,十分急迅。
仅仅利用CSS,可不难、高效地预加载图片,代码如下:
#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px;
}
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px;
}
#preload-03 { background: url(image-03.png) no-repeat -9999px -9999px;
}
将那四个ID选取器应用到(X)HTML成分中,大家便可通过CSS的background属性将图纸预加载到显示屏外的背景上。只要这几个图片的路子保持不变,当它们在Web页面包车型大巴别的地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图形。简单、高效,不必要别的JavaScript。
该措施固然高效,但仍有改良余地。使用该法加载的图纸会同页面的其它内容一起加载,扩张了页面包车型大巴全部加载时间。为了缓解这么些题材,大家扩张了有的JavaScript代码,来推迟预加载的光阴,直到页面加载完结。代码如下:
function preloader() {
        if (document.getElementById) {
                document.getElementById(“p1”).style.background =
“url(image-01.png) no-repeat”;
                document.getElementById(“p2”).style.background =
“url(image-02.png) no-repeat”;
                document.getElementById(“p3”).style.background =
“url(image-03.png) no-repeat”;
        }
}
function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != ‘function’) {
                window.onload = func;
        } else {
                window.onload = function() {
                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);

第三方CSS

JavaScript

<link rel=”stylesheet” href=”;

1
<link rel="stylesheet" href="https://example.com/style.css">

相比较之下图片,CSS 在力量上更类似脚本。像脚本一样,它适用于整个页面。它能够:

  • 剔除/添加/修改页面内容。
  • 依照页面内容提倡呼吁。
  • 可响应各个用户交互。

固然 CSS 不能够改改本地存款和储蓄,也不可能因此 CSS 运维 cryptocoin
挖矿程序(大概是大概的,只是自个儿不理解而已),但恶意 CSS
代码依然能招致相当大的损失。

艺术三:使用Ajax达成预加载

上边所提交的情势就像不够酷,那未来来看1个行使Ajax实现图片预加载的方法。该办法运用DOM,不仅仅预加载图片,还会预加载CSS、
JavaScript等连锁的事物。使用Ajax,比直接运用JavaScript,优越之处在于JavaScript和CSS的加载会潜移默化到近日页面,而Ajax不会,使用Ajax该办法简单、高效。

Js代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // XHR to request a JS and a CSS  
  4.         var xhr = new XMLHttpRequest();  
  5.         xhr.open(‘GET’, ”);  
  6.         xhr.send(”);  
  7.         xhr = new XMLHttpRequest();  
  8.         xhr.open(‘GET’, ”);  
  9.         xhr.send(”);  
  10.         // preload image  
  11.         new Image().src = “”;  
  12.     }, 1000);  
  13. };   

地点代码预加载了“preload.js”、“preload.css”和“preload.png”。一千阿秒的晚点是为了避防万一脚本挂起,而造成健康页面出现功效难点。 

下边,大家看看哪些用JavaScript来贯彻该加载进程:

Js代码  

  1. window.onload = function() {  
  2.     setTimeout(function() {  
  3.         // reference to <head>  
  4.         var head = document.getElementsByTagName(‘head’)[0];  
  5.         // a new CSS  
  6.         var css = document.createElement(‘link’);  
  7.         css.type = “text/css”;  
  8.         css.rel  = “stylesheet”;  
  9.         css.href = “”;  
  10.         // a new JS  
  11.         var js  = document.createElement(“script”);  
  12.         js.type = “text/javascript”;  
  13.         js.src  = “”;  
  14.         // preload JS and CSS  
  15.         head.appendChild(css);  
  16.         head.appendChild(js);  
  17.         // preload image  
  18.         new Image().src = “”;  
  19.     }, 1000);  
  20. };   

那边,大家因而DOM创制多少个成分来贯彻多个公文的预加载。正如上边提到的那么,使用Ajax,加载文件不会选拔到加载页面上。从那点上看,Ajax方法优越于JavaScript。

复制代码 代码如下:

在该脚本的率先部分,大家收获使用类采用器的成分,并为其安装了background属性,以预加载差异的图片。
该脚本的第2部分,我们运用addLoad伊芙nt()函数来拖延preloader()函数的加载时间,直到页面加载完成。
倘诺JavaScript不能在用户的浏览器中健康运行,会产生如何?很简短,图片不会被预加载,当页面调用图片时,平常展现即可。

键盘记录器

从滋生广大关心的代码早先讲起:

input[type=”password”][value$=”p”] { background: url(‘/password?p’);
}

1
2
3
input[type="password"][value$="p"] {
  background: url(‘/password?p’);
}

一经输入框的 value 属性值以 p 结尾,上述代码将会向 /password?p
发起呼吁。每种字符都可触及那几个操作,通过它能博取到许多数量。

暗许情形下,浏览器不会将用户输入的值存款和储蓄在 value
属性中,因而那种攻击必要依靠某个能一起那几个值的东西,如 React。

要应对这几个题材,React
可用另一种共同密码字段的法子,或浏览器可限制那3个能合营密码字段属性的选取器。可是,那仅仅是一种虚假的安全。你只消除了在特殊景况下的该难题,而其余情状照旧。

倘使 React 改为利用 data-value
属性,则该回应方法行不通。如若网站将输入框更改为
type="text",以便用户可以见到她们正在输入的始末,则该答复方法行不通。假诺网站创立了三个
<better-password-input> 组件并揭示 value
作为质量,则该回应办法行不通。

其余,还有不少别的的依照 CSS 的攻击格局:

#preload-01 { background: url()
no-repeat -9999px -9999px; }   
#preload-02 { background: url()
no-repeat -9999px -9999px; }   
#preload-03 { background: url()
no-repeat -9999px -9999px; } 

方法二:仅使用JavaScript实现预加载

流失的始末

body { display: none; } html::after { content: ‘HTTP 500 Server Error’;
}

1
2
3
4
5
6
7
body {
  display: none;
}
 
html::after {
  content: ‘HTTP 500 Server Error’;
}

上述是一个然则的事例,但想象一下,如若第一方仅对某一小部分用户那样做。不但你很难调节和测试,还会错过用户的相信。

更狡猾的办法如偶尔删除“购买”按钮,或重排内容段落。

将那四个ID选择器应用到(X)HTML成分中,大家便可通过CSS的background属性将图纸预加载到荧屏外的背景上。只要这几个图片的路子保持不变,当它们在Web页面包车型客车别样地点被调用时,浏览器就会在渲染进度中使用预加载(缓存)的图形。简单、高效,不供给任何JavaScript。
该措施尽管极快,但仍有改正余地。使用该法加载的图形会同页面的别的内容一起加载,增添了页面包车型客车完全加载时间。为了消除那几个难点,大家扩展了一些JavaScript代码,来推迟预加载的时日,直到页面加载达成。代码如下:

上述方法有时实在很迅猛,但大家稳步察觉它在骨子里贯彻进程中会花费太多日子。相反,小编更欣赏使用纯JavaScript来落实图片的预加载。上边将提供三种那样的预加载方法,它们得以极漂亮地劳作于全数现代浏览器之上。

累加内容

.price-value::before { content: ‘1’; }

1
2
3
.price-value::before {
  content: ‘1’;
}

嗯,价格被标高了。

复制代码 代码如下:

JavaScript代码段1
<div class=”hidden”>
        <script type=”text/javascript”>
                <!–//–><![CDATA[//><!–
                        var images = new Array()
                        function preload() {
                                for (i = 0; i <
preload.arguments.length; i++) {
                                        images[i] = new Image()
                                        images[i].src =
preload.arguments[i]                                }
                        }
                        preload(
                               
“”,
                               
“”,
                               
“”
                        )
                //–><!]]>
        </script>
</div>
只需不难编辑、加载所供给图片的不二法门与名称即可,很不难达成:
该情势尤其适用预加载多量的图形。作者的画廊网站使用该技术,预加载图片数量达50多张。将该脚本金和利息用到登录页面,只要用户输入登录帐号,大多数画廊图片将被预加载。 

挪动内容

.delete-everything-button { opacity: 0; position: absolute; top: 500px;
left: 300px; }

1
2
3
4
5
6
.delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

上边的按钮能做一些关键的操作,设置其为不可知,然后放在用户恐怕点击的地点。

值得庆幸的是,假使按钮的操作确实卓殊首要,网站恐怕会先出示确认对话框。但也不是不可绕过,只需利用愈来愈多的
CSS 来欺骗用户点击 “分明” 按钮而不是“撤消”按钮即可。

假使浏览器确实选用地点的答复方法化解“键盘记录器”的标题。攻击者只需在页面上找到一个非密码文本输入框(只怕是寻找输入框)并将其盖在密码输入框上即可。然后他们的抨击就又可用了。

// better image preloading @ <A
href=”>
function preloader() {   
    if (document.getElementById) {   
        document.getElementById(“preload-01”).style.background =
“url() no-repeat -9999px -9999px”;   
        document.getElementById(“preload-02”).style.background =
“url() no-repeat -9999px -9999px”;   
        document.getElementById(“preload-03”).style.background =
“url() no-repeat -9999px -9999px”;   
    }   
}   
function addLoadEvent(func) {   
    var oldonload = window.onload;   
    if (typeof window.onload != ‘function’) {   
        window.onload = func;   
    } else {   
        window.onload = function() {   
            if (oldonload) {   
                oldonload();   
            }   
            func();   
        }   
    }   
}   
addLoadEvent(preloader); 

JavaScript代码段2
<div class=”hidden”>
        <script type=”text/javascript”>
                <!–//–><![CDATA[//><!–
                        if (document.images) {
                                img1 = new Image();
                                img2 = new Image();
                                img3 = new Image();
                                img1.src =
“”;
                                img2.src =
“”;
                                img3.src =
“”;
                        }
                //–><!]]>
        </script>
</div>
该情势与地点的点子类似,也足以预加载任意数量的图形。将上面包车型客车剧本添插手其余Web页中,依据程序指令实行编辑即可。

读取属性

实在,你须要操心的不单是密码输入框。你只怕在性质中保存着别的的潜伏内容:

JavaScript

<input type=”hidden” name=”csrf” value=”1687594325″> <img
src=”/avatars/samanthasmith83.jpg”> <iframe
src=”//cool-maps-service/show?st-pancras-london”></iframe>
<img src=”/gender-icons/female.png”> <div></div>

1
2
3
4
5
<input type="hidden" name="csrf" value="1687594325">
<img src="/avatars/samanthasmith83.jpg">
<iframe src="//cool-maps-service/show?st-pancras-london"></iframe>
<img src="/gender-icons/female.png">
<div></div>

怀有那些都足以由此 CSS 选用器获取,且能发出请求。

在该脚本的第③有个别,大家赢得使用类选拔器的因素,并为其安装了background属性,以预加载分歧的图形。
该脚本的第1某个,大家利用addLoad伊芙nt()函数来延缓preloader()函数的加载时间,直到页面加载达成。
假如JavaScript不能够在用户的浏览器中健康运作,会生出哪些?相当粗略,图片不会被预加载,当页面调用图片时,正常呈现即可。

正如所看见,每加载八个图形都亟需创建3个变量,如“img1 = new
Image();”,及图片源地址申明,如“img3.src =
“../path/to/image-003.gif”;”。参考该模式,你可依据供给加载任意多的图形。

监听交互

JavaScript

.login-button:hover { background: url(‘/login-button-hover’); }
.login-button:active { background: url(‘/login-button-active’); }

1
2
3
4
5
6
7
.login-button:hover {
  background: url(‘/login-button-hover’);
}
 
.login-button:active {
  background: url(‘/login-button-active’);
}

可将 hover 和 active 状态发送到服务器。通过适当的
CSS,你就能博取到用户意图。

主意二:仅使用JavaScript达成预加载

咱俩又对该方法进行了革新。将该脚本封装入1个函数中,并行使
addLoad伊芙nt(),延迟预加载时间,直到页面加载达成。
function preloader() {
        if (document.images) {
                var img1 = new Image();
                var img2 = new Image();
                var img3 = new Image();
                img1.src = “”;
                img2.src = “”;
                img3.src = “”;
        }
}
function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != ‘function’) {
                window.onload = func;
        } else {
                window.onload = function() {
                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);
艺术三:使用Ajax完结预加载

读取文本

JavaScript

@font-face { font-family: blah; src: url(‘/page-contains-q’)
format(‘woff’); unicode-range: U+85; } html { font-family: blah,
sans-serif; }

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: blah;
  src: url(‘/page-contains-q’) format(‘woff’);
  unicode-range: U+85;
}
 
html {
  font-family: blah, sans-serif;
}

在那种情景下,借使页面内有 q
字符,则会发送请求。你能够为分化的字符,并对准一定的要素,创造大气不比的书体。字体也足以涵盖
ligature(连字),所以您能够在开头检查和测试字符系列。你甚至能够通过
将字体技巧与滚动条检查和测试结合起来
来预计内容。

译注:关于 ligature(连字), 可查看 Wikipedia Typographic
Ligature

上述办法有时的确很迅猛,但大家稳步察觉它在实际上贯彻进度中会开销太多时间。相反,小编更欣赏使用纯JavaScript来落到实处图片的预加载。上边将提供三种那样的预加载方法,它们得以很美丽貌地干活于具有现代浏览器之上。

地方所付出的方式如同不够酷,那今后来看二个应用Ajax完毕图片预加载的法子。该措施应用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等互为表里的东西。使用Ajax,比一向行使JavaScript,优越之处在于JavaScript和CSS的加载不会潜移默化到方今页面。该办法简单、高效。
window.onload = function() {
        setTimeout(function() {
                // XHR to request a JS and a CSS
                var xhr = new XMLHttpRequest();
                xhr.open(‘GET’, ”);
                xhr.send(”);
                xhr = new XMLHttpRequest();
                xhr.open(‘GET’, ”);
                xhr.send(”);
                // preload image
                new Image().src = “”;
        }, 1000);
};
上边代码预加载了“preload.js”、“preload.css”和“preload.png”。一千微秒的超时是为了幸免脚本挂起,而导致健康页面出现功效难题。

其三方内容不安全

那么些只是自家所知晓的有的技巧,笔者深信不疑还有愈多。

其三方内容在其沙箱区域内部存款和储蓄器有强有力的力量。一张图纸或沙盒化的 iframe
仅在三个小范围内的沙箱中,但脚本和样式的限量却是你的页面,甚至是一切站点。

如果您担心恶意用户诱使你的网站加载第一方财富,能够透过
CSP
用作预防手段,其得以界定加载图片,脚本和样式的根源。

您仍是可以够运用 Subresource Integrity(子财富全体性

来确认保证脚本/样式的剧情格外特定的 hash,否则将不加载。谢谢 Hacker
News上的Piskvorrr
提醒我!

设若你想驾驭越来越多如上述的 hack 技巧,包蕴滚动条技巧,越多消息请参阅
Mathias Bynens’ talk from
2014,Mike West’s talk from
2013,或 Mario Heiderich
et al.’s paper from
2012(PDF)。是的,那不是何等新东西。

1 赞 1 收藏
评论

美高梅开户网址 1

JavaScript代码段1
只需简单编辑、加载所急需图片的门路与名称即可,很容易完结:

上面,我们看看哪些用JavaScript来兑现该加载进度:
window.onload = function() {
        setTimeout(function() {
                // reference to <head>
                var head = document.getElementsByTagName(‘head’)[0];
                // a new CSS
                var css = document.createElement(‘link’);
                css.type = “text/css”;
                css.rel  = “stylesheet”;
                css.href = “”;
                // a new JS
                var js  = document.createElement(“script”);
                js.type = “text/javascript”;
                js.src  = “”;
                // preload JS and CSS
                head.appendChild(css);
                head.appendChild(js);
                // preload image
                new Image().src = “”;
        }, 1000);
};
那里,大家由此DOM创立四个因平昔兑现多个文件的预加载。正如上面提到的那么,使用Ajax,加载文件不会动用到加载页面上。从这一点上看,Ajax方法优越于JavaScript。

复制代码 代码如下:

<div class=”hidden”>   
    <script type=”text/javascript”>   
        <!–//–><![CDATA[//><!–             var
images = new Array()   
            function preload() {   
                for (i = 0; i < preload.arguments.length; i++) {   
                    images[i] = new Image()   
                    images[i].src = preload.arguments[i]   
                }   
            }   
            preload(   
                “”,   
                “”,   
                “” 
            )   
        //–><!]]>     </script>   
</div> 

该办法特别适用预加载大批量的图片。小编的画廊网站使用该技术,预加载图片数量达50多张。将该脚本利用到登录页面,只要用户输入登录帐号,大多数画廊图片将被预加载。

JavaScript代码段2
该方法与地点的方法类似,也足以预加载任意数量的图片。将上面包车型客车脚本添出席别的Web页中,依据程序指令展开编写制定即可。

复制代码 代码如下:

<div class=”hidden”>
    <script type=”text/javascript”>
        <!–//–><![CDATA[//><!–             if
(document.images) {
                img1 = new Image();
                img2 = new Image();
                img3 = new Image();
                img1.src =
“”;
                img2.src =
“”;
                img3.src =
“”;
            }
        //–><!]]>     </script>
</div>

正如所看见,每加载一个图片都亟需创立三个变量,如“img1 = new
Image();”,及图片源地址评释,如“img3.src =
“../path/to/image-003.gif”;”。参考该格局,你可根据要求加载任意多的图纸。
小编们又对该格局开始展览了改进。将该脚本封装入叁个函数中,并使用
addLoad伊芙nt(),延迟预加载时间,直到页面加载完结。

复制代码 代码如下:

function preloader() {   
    if (document.images) {   
        var img1 = new Image();   
        var img2 = new Image();   
        var img3 = new Image();   
        img1.src = “”;   
        img2.src = “”;   
        img3.src = “”;   
    }   
}   
function addLoadEvent(func) {   
    var oldonload = window.onload;   
    if (typeof window.onload != ‘function’) {   
        window.onload = func;   
    } else {   
        window.onload = function() {   
            if (oldonload) {   
                oldonload();   
            }   
            func();   
        }   
    }   
}   
addLoadEvent(preloader); 

格局三:使用Ajax完成预加载

上边所提交的措施就像不够酷,那今后来看一个使用Ajax完毕图片预加载的不二法门。该办法运用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等连锁的东西。使用Ajax,比一贯运用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到近期页面。该办法不难、高效。

复制代码 代码如下:

window.onload = function() {   
    setTimeout(function() {   
        // XHR to request a JS and a CSS         var xhr = new
XMLHttpRequest();   
        xhr.open(‘GET’, ”);   
        xhr.send(”);   
        xhr = new XMLHttpRequest();   
        xhr.open(‘GET’, ”);   
        xhr.send(”);   
        // preload image         new Image().src =
“”;   
    }, 1000);   
}; 

下面代码预加载了“preload.js”、“preload.css”和“preload.png”。一千微秒的逾期是为了防患脚本挂起,而致使健康页面出现成效问题。
上面,大家看看怎样用JavaScript来落到实处该加载进程:

复制代码 代码如下:

window.onload = function() {   
    
    setTimeout(function() {   
    
        // reference to <head>          
        var head = document.getElementsByTagName(‘head’)[0];   
美高梅开户网址 ,    
        // a new CSS           
        var css = document.createElement(‘link’);   
        css.type = “text/css”;   
        css.rel  = “stylesheet”;   
        css.href = “”;   
    
        // a new JS           
        var js  = document.createElement(“script”);   
        js.type = “text/javascript”;   
        js.src  = “”;   
    
        // preload JS and CSS         head.appendChild(css);   
        head.appendChild(js);   
    
        // preload image           
        new Image().src = “”;   
    
    }, 1000);   
    
}; 

此处,大家经过DOM创造三个元一贯完结八个公文的预加载。正如上面提到的那么,使用Ajax,加载文件不会采取到加载页面上。从那一点上看,Ajax方法优越于JavaScript。

好了,本文就先介绍到此地,二种达成图片预加载技术的法子我们都已经精通了呢,具体哪些更高速,我想小伙伴们也都看出来了,这就选择到温馨的门类中吗。

你恐怕感兴趣的文章:

  • 运用CSS、JavaScript及Ajax达成图片预加载的点子
  • 使用CSS、JavaScript及Ajax达成长足的图样预加载
  • 二种js图片预加载达成方式分享
  • jquery达成图片预加载
  • jQuery简单兑现图片预加载
  • Jquery实现图片预加载与延时加载的章程
  • js图片预加载示例
  • JS完成图片预加载无需等待
  • jQuery图片预加载
    等比缩放达成代码
  • js 完结图片预加载(js操作 Image对象属性complete ,事件onload
    异步加载图片)
  • jquery 图片预加载
    自动等比例缩放插件
  • 使用CSS、JavaScript及Ajax达成图片预加载的三大办法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图