jquery图片预加载插件

kel 发布于2019-08-20 16:17 / 3366人阅读

摘要：更多资源请图片预加载插件网站开发时经常需要在某个页面需要实现对大量图片的浏览，就会出现网页假死的现象，所以为了让图片在转换的时候不出现等待，我们最好是先让图片预先加载到本地，让用户无需等待过长的时间就能看到其他图片，优化用户体验调用方式请预

更多资源请Star：https://github.com/maidishike...

图片预加载插件

网站开发时经常需要在某个页面需要实现对大量图片的浏览，就会出现网页假死的现象，所以为了让图片在转换的时候不出现等待，我们最好是先让图片预先加载到本地，让用户无需等待过长的时间就能看到其他图片，优化用户体验

调用方式

请预先引入jquery

$.preload(imgs, { // imgs: 图片数组或字符串 ["1.jgp", "2.jpg"] 或者 "1.jpg"
  order: "ordered", // 默认无序加载
  each: function(count) {
    // 单个图片加载完成
  },
  all: function() {
    // 所有图片加载完成
  }
});

插件代码

(function($) {
  function PreLoad (imgs, opts) {
    this.imgs = (typeof imgs === "string") ? [imgs] : imgs;
    this.opts = $.extend({}, PreLoad.DEFAULTS, opts);
    if (this.opts.order === "ordered") {
      this._ordered(); // 有序加载
    } else {
      this._unordered(); // 无序加载
    }
  }
  PreLoad.DEFAULTS = {
    order: "unordered", //默认进行无序预加载
    each: null, // 单个图片加载完成后执行的方法
    all: null // 所有图片加载完成后执行的方法
  };

  PreLoad.prototype._ordered = function () { // 有序加载
    var imgs = this.imgs, len = imgs.length, count = 0, opts = this.opts;
    load();
    function load () {
      var img = new Image();
      $(img).on("load error", function() {
        opts.each && opts.each(count);
        if (count >= len) {
          // 所有图片加载完毕
          opts.all && opts.all();
        } else {
          load();
        }
        count++;
      });
      img.src = imgs[count];
    }
  };
  PreLoad.prototype._unordered = function() { // 无序加载
    var imgs = this.imgs, len = imgs.length, count = 0, opts = this.opts;
    imgs.forEach(function(elem) {
      var img = new Image();
      $(img).on("load error", function(){
         opts.each && opts.each(count);
        if (count >= len -1) {
          opts.all && opts.all();
        }
        count++;
      });
      img.src = elem;
    });
  };
  $.extend({
    preload: function(imgs, opts) {
      new PreLoad(imgs, opts);
    }
  });
})(jQuery);

GPU云服务器云服务器 js视频预加载插件图片预加载 JS图片预加载 js实现图片预加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82846.html

带型带秀专题之 Lazy Load (一)

摘要：今天开始带型带秀专题。专题第二节会深入到源码。在可视图片加载后，浏览器将处于就绪状态。只需要将该容器元素作为对象传递。默认地，循环会在找到第一个视口外的图像时停止。但是某些页面的布局不符合该假设。最差的情况是该值为实际图片的数量。今天开始带型带秀专题 -- Lazy Load。先从使用比较广泛的 jQuery Lazy Load 插件开始，逐步深入。该插件已经开发到了第二版，有兴趣的...

wangzy2019 2019-08-21 17:23 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0
懒加载、瀑布流和LightBox实现图片搜索效果

摘要：无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见，如果是则重复以上内容查看源码开始做一个小项目，算是对js和jQuery的一次练习吧。图片资源来自这个网站（上面有很多高清图片关键还是免费下载的）：https://unsplash.com/ 项目具体效果可以点这里：https://bjw1234.github.io/ima......

rainyang 2019-08-26 11:51 评论0 收藏0
jQuery实用的一些技巧

摘要：元素的大小设置可以在图片加载完成后计算。禁用输入有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作比如检查我已阅读条款复选框。如果文本不存在，则这个元素将被隐藏可见变化的触发当用户不再聚焦或者重新聚焦一个标签时触发脚本转载引子 jQuery的存在，让学习前端开发的人感到前端越来越容易入门了，用简单的几行代码就可以实现需求，但是，你真的会用jQuery么，当代码运行后无...

niuxiaowei111 2019-08-19 17:57 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

MkkHou 2019-08-29 16:16 评论0 收藏0