图片资源的预加载

时间: 2019-12-13阅读: 486标签: 加载

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。如何实现预加载?


资源文件:



脚本代码

js/index.js

(function(){
  var arr = [];

  for (var i = 1; i <= 6; i++) {
    arr.push("./img/web-" + (i < 10 ? "0" + i : i) + ".jpg");
  }

  getImage(arr, callbackHandler);

  function getImage (arr, callback) {
    var img = new Image();
    img.arr = arr;
    img.callback = callback;
    img.imgList = [];
    img.num = 0;
    img.addEventListener("load", loadHandler);
    img.src = arr[img.num];
  }

  function loadHandler () {
    this.imgList.push(this.cloneNode(false));
    this.num++;
    if (this.num >= arr.length) {
      callbackHandler(this.imgList);
      this.removeEventListener("load", loadHandler);
      return;
    }
    this.src = this.arr[this.num];
  }

  function callbackHandler (arr) {
    for (var i = 0; i < arr.length; i++) {
      console.log(arr[i].src)
    }
  }
})();

采用面向对象思想封装的脚本代码(提高复用性):

js/utils/utils.js

var Utils = (function(){
  return {
    loadImage: function (arr, callback) {
      var img = new Image();
      img.arr = arr;
      img.callback = callback;
      img.imgList = [];
      img.num = 0;
      img.addEventListener("load", this.loadHandler);
      img.src = arr[img.num];
    },
    loadHandler: function () {
      this.imgList.push(this.cloneNode(false));
      this.num++;
      if (this.num >= this.arr.length) {
        this.callback(this.imgList);
        this.removeEventListener("load", this.loadHandler);
        return;
      }
      this.src = this.arr[this.num];
    }
  }
})();

js/index2.js

(function(){
  var arr = [];

  for (var i = 1; i <= 6; i++) {
    arr.push("./img/web-" + (i < 10 ? "0" + i : i) + ".jpg");
  }

  Utils.loadImage(arr, callbackHandler);

  function callbackHandler (arr) {
    for (var i = 0; i < arr.length; i++) {
      console.log(arr[i].src)
    }
  }
})();

效果图:



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7249

关闭

小程序页面预加载技术

之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术

动态加载图片与脚本

动态加载图片许多方法。第一种方法,随便创建一个块状元素如DIV,把它加入DOM树,然后用CSS设置背景图片。第二种前半部分同第一种,只不过这次用innerHTML加一张图片变成它的子元素。

使用Flutter实现58同城中的加载动画

在应用中执行耗时操作时,为了避免界面长时间等待造成假死的现象,往往会添加一个加载中的动画来提醒用户,在58同城中也不例外,而且我们并没有使用系统默认的加载动画,而是制作了一个具有58特色的加载动画。

纯CSS实现加载转圈样式

不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个。

vue图片预加载

图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况。项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序

JS 图片懒加载

所谓懒加载就是在图片进入 *可视区域* 前,用 *同一张* 图片作为图片的 src 属性值,这样可减少请求及带宽。懒加载的重点是:判断元素是否进入可视区域?

网站设计如何减少页面加载时间

百度将网站的加载速度加入影响排名的因素中,这就是网站设计应该努力减少网站加载时间的重要原因。如果一个电子商务网站每天销售10万元,延迟1秒的页面加载时间可能会导致每年损失250万元

监测页面加载的几个函数的区别

window.onload 表示页面包含图片等文件在内的所有元素都加载完成。document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。

浏览器HTML自带懒加载技术

对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:1、加载初始的 HTML 响应内容2、加载懒加载库3、加载图片

简单高效实现一个按需加载图片的逻辑

需求:根据页面滚动,当图片进入视野,就开始加载,否则不加载任何图片。页面加载完成时先调用一下,首屏内的图片。代码简单,却很通用,很实用。方便扩展

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广