图片资源的预加载

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

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


资源文件:



脚本代码:

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.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

前端图片懒加载及节流

懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方,对应位置的内容才进行加载显示,这样能明显减少了服务器的压力和流量

vue开发之图片加载不出来问题解决

在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。一、项目打包完成后,打开整体空白

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

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

懒加载形式,为什么需要懒加载?

按需加载,即一种在页面加载时延迟加载一些非关键资源的技术。作为网页内容的一部分图像和影像通常需要消耗很多资源加载。在网页优化的过程中,需要避免资源浪费在加载图片和视频上。

IntersectionObserver滚动加载

就是监听根元素与目标元素在指定的交叉比例时触发回调;兼容部分现代游览器(chrome)生产环境中使用,请注意兼容需求;使用场景在一定使用场景可替代onscroll

vue 原生添加滚动加载更多

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度

jquery图片懒加载

对于一个有多个图片的网站来说,访问的时候不应该直接加载所有图片,而是应该只将浏览器窗口内的图片进行加载。当滚动的时候,在加载更多的图片,叫做图片的懒加载。

HTML自带懒加载技术

对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始

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

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

vue-router从2.x升级到4.x, 路由模块按需加载改写方式

直接升级,用原来的代码,会报错Failed to mount component: template or render function not defined,旧的写法;新的写法

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

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

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