登录
当前位置： 首页 > 编程笔记 >

基于javascript实现图片预加载

顾宸
2023-03-14
本文向大家介绍基于javascript实现图片预加载，包括了基于javascript实现图片预加载的使用技巧和注意事项，需要的朋友参考一下

一、定义
预加载图片是提升用户体验的一个好办法，提前加载用户所需的图片，保证图片快速、无缝发布，使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中。
[注意]若使用即时加载，加载的图片与页面的其他内容一起加载会增加页面的整体加载时间，所以使用window.onload比较合适。
二、两种思路
1、使用背景图像
使用页面无用元素的背景图片预加载

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li{
  height: 0;
  width: 0;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<ul class="list">
  <li id="preload1"></li>
  <li id="preload2"></li>
  <li id="preload3"></li>
  <li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(){
  preload1.style.background = "url('img/img1.gif')";
  preload2.style.background = "url('img/img2.gif')";
  preload3.style.background = "url('img/img3.gif')";
  preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
  preLoadImg();  
}
</script>
</body>

2、使用Image()
通过new Image()或document.createElement('img')创建<img>标签，然后通过<img>src赋值语句来加载图片

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
  for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = preLoadImg.arguments[0][i];
  }
}
window.onload = function(){
  preLoadImg(array);  
}
</script>
</body>

三、onload事件
利用图像的onload事件可以确切地知道图片是否被真正加载，并可能在后续执行一系列对图片的操作功能，如获取当前图片的实际宽高及索引等
[注意1]图片的src赋值语句必须放在图片的onload事件后面。否则可能出现图片已经加载完毕、但事件绑定尚未完成的情况

<button>载入图片</button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
  preLoadImg('img/test.png');
}
function preLoadImg(url){
  var oImg = document.createElement('img');
  //在本机环境下，IE8-浏览器下oImg的onload事件放在src后面将无法载入图片
  oImg.src = url;
  oImg.onload = function(){
    document.body.appendChild(oImg);
    oImg.onload = null;
    oImg = null;
  }      
}
</script>

[注意2]Image对象的onload属性引用了一个匿名函数对象，而匿名函数通过其作用域引用Image对象，这种循环引用会有IE6中导致内存泄漏，因此，应该解除循环引用。
【递归写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var oImg = document.createElement('img');
var iDown = 0;  
preLoadImg();
function preLoadImg(){
  oImg.onload = function(){
    iDown++;
    alert('第' + iDown + '张图片的宽:' + this.width + ' 高:' + this.height);
    if(iDown < array.length){
      preLoadImg();
    }else{
      oImg.onload = null;
      oImg = null;
    }
  }
  oImg.src = array[iDown];            
}
</script>
</body>
</html>

【考虑onerror的更完善写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
  function loadImgTest(arr){
    iDown++;
    if(iDown < arr.length){
      preLoadImg(arr);
    }else{
      alert('ok');
      oImg.onload = null;
      oImg = null;      
    }
  }
  oImage.onload = function(){
    loadImgTest(arr);
  };
  oImage.onerror = function(){
    loadImgTest(arr);
  };  
  oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
</body>
</html>

【循环写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(arr,callback){
  var aImages = [];
  var iDown = 0;
  for(var i = 0; i < arr.length; i++){
    aImages[i] = new Image();
    aImages[i].onload = function(){
      loadImgTest(arr,callback);
    };
    aImages[i].onerror = function(){
      loadImgTest(arr,callback);
    };    
    aImages[i].src = arr[iDown];
  }
  function loadImgTest(arr,callback){
    iDown++;
    if(iDown == arr.length){
      alert('ok');
      callback && callback.call(aImages);    
    }
  }  
}
preLoadImg(array,function(){
  console.log(this[0].width);
});
</script>
</body>
</html>
应用：预加载模糊变清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="#" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var arrayB = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
var arrayL = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = arrayL[iNow];
  aftLoadImg(arrayB,oImg0);
}

var aImages = [];
window.onload = function(){
  preLoadImg(arrayL);  
}
function preLoadImg(arr){
  for(var i = 0, len = arr.length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = arr[i];
  }
}
function aftLoadImg(arr,obj){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = arr[iNow];
  }
  oImg.src = arr[iNow];
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料：
  • 基于javascript实现图片懒加载

    本文向大家介绍基于javascript实现图片懒加载，包括了基于javascript实现图片懒加载的使用技巧和注意事项，需要的朋友参考一下 一、定义 　　图片延迟加载也称为懒加载，延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。  二、呈现形式 【1】延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载

  • javascript简单实现图片预加载

    本文向大家介绍javascript简单实现图片预加载，包括了javascript简单实现图片预加载的使用技巧和注意事项，需要的朋友参考一下 简单的图片预加载 reloader.js 具体用法如上，小伙伴们可以发挥你的想象力，自由扩展。

  • 基于javascript实现图片切换效果

    本文向大家介绍基于javascript实现图片切换效果，包括了基于javascript实现图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是

  • 基于javascript数组实现图片轮播

    本文向大家介绍基于javascript数组实现图片轮播，包括了基于javascript数组实现图片轮播的使用技巧和注意事项，需要的朋友参考一下 图片轮播的办法有多种，在这里介绍一种简单的：js数组实现。 首先将图片路径存储在数组中，然后再调用setInterval函数来依次轮播图片 完整实例如下 精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播 以上就是

  • JavaScript模仿Pinterest实现图片预加载功能

    本文向大家介绍JavaScript模仿Pinterest实现图片预加载功能，包括了JavaScript模仿Pinterest实现图片预加载功能的使用技巧和注意事项，需要的朋友参考一下 前言 对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。 看看下面的截图: 大家可以感觉到

  • javascript图片预加载完整实例

    本文向大家介绍javascript图片预加载完整实例，包括了javascript图片预加载完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考，具体如下： 希望本文所述对大家JavaScript程序设计有所帮助。

相关阅读

JavaScript模仿Pinterest实现图片预加载功能javascript图片预加载完整实例基于javascript实现图片左右切换效果jQuery实现预加载图片的方法基于jquery实现图片上传本地预览功能

相关文章

实战-Swing实现数字拼图12.3 DrySister看妹子应用(第一版)——3.图片加载优化(写个图片缓存小框架)Python实战：将图片转成像素风JavaScript基础之函数基础Netty实践-处理基于流的传输

相关问答

javascript - js如何实现轮播N张连续图片实现gif动图效果？基于OpenCV的Tesseract OCR图像预处理javascript - Vue 瀑布流 图片加载问题?基于FIFO的队列实现？将图片添加到图库时出现NullPointerException

相关工具

横向Scrollview添加图片图片下载和保存图片下载和浏览图片放大镜iOS 图片滤镜

相关文档

深度学习入门：基于 Python 的理论与实现基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现JavaScript 基础知识机器学习实战：基于 Scikit-Learn 和 TensorFlowJavaScript 基础进阶系列
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.