• 预加载下一张图片


    首页说明本人是一个菜鸟,所以代码也很菜,有写的不对的,错的,请多多指教。

    此方法只能按顺序预加载图片,当页面进来时候开始加载第二张图片,然后以此类推..这样就不用一次把所有的图片加载完,或者等待下一张图片的加载。

    <img src="" border="1" align="top" width="400" height="300" id="showImg" /> <strong style="color:#0000FF"><- Click</strong>    

    var readyImg = function(){
      var self = this;
      this.imgList     =['http://zys365.com/demo/images/5.jpg','http://zys365.com/demo/images/42766298.jpg','http://zys365.com/demo/images/42766101.jpg','http://zys365.com/demo/images/42813139.jpg','http://zys365.com/demo/images/42766145.jpg','http://zys365.com/demo/images/42766316.jpg','http://zys365.com/demo/images/42813100.jpg','http://zys365.com/demo/images/42813171.jpg'];
      var imgId = 0;
      this.url = null;

      this.loadImg = function(){
      var img = new Image();
      $('#log').text("下一副的ID是" + imgId + ";图片的地址是" + self.imgList[imgId])
      $('#showImg').attr('src',self.imgList[imgId])
      $('#text').text('正在加载中....')
      imgId = imgId >= self.imgList.length-1 ? 0 : imgId+1;
      img.src = self.imgList[imgId];
      img.onload = function(){
      img.onload = null;
      img = null;
      $('#text').text('加载玩了')
        $('#reday').text('下一张图片加载完成');
      };
      self.url = img.src;
      };
      this.setImg = function(){
        self.loadImg()
        $('#showImg').click(function(){
          $('#showImg').attr('src',self.url)
            $('#reday').text('下一张图片正在加载...');
            self.loadImg();
        })
       }
    }
    var host = new readyImg;
    host.setImg()

  • 相关阅读:
    使用pyppeteer 下载chromium 报错 或速度慢
    Splash抓取jd
    Splash抓取javaScript动态渲染页面
    Django3+websocket+paramiko实现web页面实时输出
    django3 websockets
    MySQL数据库OLTP基准测试( sysbench)
    数据库链接池大小设置和相关测试
    Linux 性能调优IO篇:工具命令篇
    Linux 性能调优内存篇:工具命令篇
    Vue笔记:vue项目引入bootstrap、elementUI、echarts
  • 原文地址:https://www.cnblogs.com/taoze/p/2566164.html
Copyright © 2020-2023  润新知