<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.image-item {
width: 40%;
margin-right: 5px;
display: inline-block;
height: 350px;
width: 250px;
background: silver;
}
.beauty-list {
margin: 0 auto;
width: 560px;
height: 1200px;
}
.preload{
margin:0 auto 50px auto;
width:560px;
height: 820px;
}
.disN{
display: none;
}
</style>
</head>
<body>
<!--预加载-->
<div class="preload" id="preload">
<!--方式一：通过标签预先加载图片资源-->
<img src="https://webimg.quanjing.com/Recommend/1558458888705.jpg" class="image-item disN" />
<img src="https://webimg.quanjing.com/Recommend/1558458860095.jpg" class="image-item disN" />
<img src="https://webimg.quanjing.com/Recommend/1558458906986.jpg" class="image-item disN" />
<img src="https://webimg.quanjing.com/Recommend/1558458916877.jpg" class="image-item disN" />
<!--方式二：通过ajax异步请求资源,缺点：存在跨域问题-->
<script>
//ajax四个步骤
function createXHR(){
var xhr;
try{
xhr = new XMLHttpRequest();
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
xhr = new ActiveObject("Msxml2.XMLHTTP");
}catch(e){
alert("浏览器太老，不能使用ajax");
}
}
}
return xhr;
}
// 1. 创建XMLHttpRequest对象
var xhr = createXHR();
xhr.responseType = "blob";
// 2. 调用open方法获取跟服务器的连接{{ 第一个参数,请求方式：GET|POST,第二个参数，请求路径：URL,第三个参数，是否异步请求（async）:true|false }}
xhr.open('GET','http://127.0.0.1:5500/0.jpg',true);
// 3. 调用send方法, 向服务器发起请求
// 如果是post请求, 那么需要在send方法中带请求参数
// 如果是get请求, 那么参数为null
xhr.send(null);
// 4. 注册一个监听器
/*
不断地去监听请求的过程返回的一个状态码
在这个时候我们只需要关注readyState == 4的情况，这个时候说明服务器完成了响应
我们还需要关注另外一个状态码 status是服务器响应过来的, 需要status == 200
*/
xhr.onreadystatechange = function () {
if (xhr.readyState==4 && xhr.status == 200) {
//此时说明响应完毕 我们可以通过xml.responseText 来获取服务器的响应内容(文本内容)
// $("").html(xhr.responseText);
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.classList.add('image-item');
img.src = window.URL.createObjectURL(blob);
var pre = document.getElementById('preload');
pre.appendChild(img);
}
};
</script>
<!--方式三：通过preload.js预加载（其实只是综合前两种）-->
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
<script>
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadManifest([
{id: "myImage", src:"http://127.0.0.1:5500/11.jpg"}
]);
function handleComplete() {
var image = queue.getResult("myImage");
image.classList.add('image-item');
var pre = document.getElementById('preload');
pre.appendChild(image);
}
</script>
</div>
</body>
</html>
效果
