成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jquery圖片預(yù)加載插件

kel / 3401人閱讀

摘要：更多資源請(qǐng)圖片預(yù)加載插件網(wǎng)站開(kāi)發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽，就會(huì)出現(xiàn)網(wǎng)頁(yè)假死的現(xiàn)象，所以為了讓圖片在轉(zhuǎn)換的時(shí)候不出現(xiàn)等待，我們最好是先讓圖片預(yù)先加載到本地，讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片，優(yōu)化用戶體驗(yàn)調(diào)用方式請(qǐng)預(yù)

更多資源請(qǐng)Star：https://github.com/maidishike...
圖片預(yù)加載插件 
網(wǎng)站開(kāi)發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽，就會(huì)出現(xiàn)網(wǎng)頁(yè)假死的現(xiàn)象，所以為了讓圖片在轉(zhuǎn)換的時(shí)候不出現(xiàn)等待，我們最好是先讓圖片預(yù)先加載到本地，讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片，優(yōu)化用戶體驗(yàn)
調(diào)用方式

請(qǐng)預(yù)先引入jquery

$.preload(imgs, { // imgs: 圖片數(shù)組或字符串 ["1.jgp", "2.jpg"] 或者 "1.jpg"
  order: "ordered", // 默認(rèn)無(wú)序加載
  each: function(count) {
    // 單個(gè)圖片加載完成
  },
  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(); // 無(wú)序加載
    }
  }
  PreLoad.DEFAULTS = {
    order: "unordered", //默認(rèn)進(jìn)行無(wú)序預(yù)加載
    each: null, // 單個(gè)圖片加載完成后執(zhí)行的方法
    all: null // 所有圖片加載完成后執(zhí)行的方法
  };

  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() { // 無(wú)序加載
    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);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82846.html

相關(guān)文章

  • 帶型帶秀專題之 Lazy Load (一)

    摘要：今天開(kāi)始帶型帶秀專題。專題第二節(jié)會(huì)深入到源碼。在可視圖片加載后，瀏覽器將處于就緒狀態(tài)。只需要將該容器元素作為對(duì)象傳遞。默認(rèn)地，循環(huán)會(huì)在找到第一個(gè)視口外的圖像時(shí)停止。但是某些頁(yè)面的布局不符合該假設(shè)。最差的情況是該值為實(shí)際圖片的數(shù)量。 今天開(kāi)始帶型帶秀專題 -- Lazy Load。先從使用比較廣泛的 jQuery Lazy Load 插件開(kāi)始，逐步深入。該插件已經(jīng)開(kāi)發(fā)到了第二版，有興趣的...

    wangzy2019 評(píng)論0 收藏0

  • 精彩文章大合集- 收藏集 - 掘金

    摘要：發(fā)布應(yīng)用市場(chǎng)的平臺(tái)搶紅包工具紅包精靈開(kāi)源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開(kāi)源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫(xiě)技巧總結(jié)前端掘金本文總結(jié)了代碼編寫(xiě)技巧，來(lái)提升你的和代碼。 收藏安卓開(kāi)發(fā)中非常實(shí)用優(yōu)秀的庫(kù)! 有圖有真相! - Android - 掘金本來(lái)是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫(kù)了,就沒(méi)必要再去重復(fù)造輪子了,便歸納工作中比...

    ermaoL 評(píng)論0 收藏0

  • 懶加載、瀑布流和LightBox實(shí)現(xiàn)圖片搜索效果

    摘要：無(wú)非就是獲取用戶輸入的獲取圖片信息組裝填充頁(yè)面數(shù)據(jù)瀑布流布局處理在頁(yè)面滾動(dòng)時(shí)判斷最后一張圖片是否可見(jiàn)，如果是則重復(fù)以上內(nèi)容查看源碼 開(kāi)始 做一個(gè)小項(xiàng)目，算是對(duì)js和jQuery的一次練習(xí)吧。 圖片資源來(lái)自這個(gè)網(wǎng)站（上面有很多高清圖片關(guān)鍵還是免費(fèi)下載的）：https://unsplash.com/ 項(xiàng)目具體效果可以點(diǎn)這里：https://bjw1234.github.io/ima......

    rainyang 評(píng)論0 收藏0

  • jQuery實(shí)用的一些技巧

    摘要：元素的大小設(shè)置可以在圖片加載完成后計(jì)算。禁用輸入有時(shí)你可能需要用表單的提交按鈕或者某個(gè)輸入框直到用戶執(zhí)行了某個(gè)動(dòng)作比如檢查我已閱讀條款復(fù)選框。如果文本不存在，則這個(gè)元素將被隱藏可見(jiàn)變化的觸發(fā)當(dāng)用戶不再聚焦或者重新聚焦一個(gè)標(biāo)簽時(shí)觸發(fā)腳本轉(zhuǎn)載 引子 jQuery的存在，讓學(xué)習(xí)前端開(kāi)發(fā)的人感到前端越來(lái)越容易入門(mén)了，用簡(jiǎn)單的幾行代碼就可以實(shí)現(xiàn)需求，但是，你真的會(huì)用jQuery么，當(dāng)代碼運(yùn)行后無(wú)...

    niuxiaowei111 評(píng)論0 收藏0

  • jQuery動(dòng)畫(huà)效果、jQuery插件使用

    摘要：一事件的綁定與解綁的簡(jiǎn)單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。 一、事件的綁定與解綁 1.1 jQuery的簡(jiǎn)單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

    MkkHou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

kel

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<