第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

一、圖片預(yù)加載的3個(gè)步驟

1、實(shí)例化一個(gè)Image對(duì)象。

2、監(jiān)聽它的load、error事件。

3、為src附上正確的圖片路徑。

(function($) {

? // 面向?qū)ο?/p>

? function PreLoad(imgs, options) {

? ? this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

? ? this.opts = $.extend({}, PreLoad.DEFAULTS, options); // options和PreLoad.DEFAULTS這2個(gè)對(duì)象融合，生成新的對(duì)象，將新對(duì)象返回給opts保存下來。

? ? if (this.opts.order === 'ordered') {

? ? ? this._ordered();

? ? } else {

? ? ? this._unordered(); // _表示只在函數(shù)內(nèi)部使用，而不在外部調(diào)用

? ? }

? }

? PreLoad.DEFAULTS = {

? ? order: 'unordered', // 無序預(yù)加載

? ? each: null, // 每一張圖片加載完畢后執(zhí)行

? ? all: null? // 所有圖片加載完畢后執(zhí)行

? };

? PreLoad.prototype._ordered = function() { //方法寫在原型鏈上

? ? var opts = this.opts, // 保存為局部變量

? ? ? ? imgs = this.imgs,

? ? ? ? len = imgs.length,

? ? ? ? count = 0;

? ? var imgObj = new Image();

? ? load();

? ? function load() {

? ? ? $(imgObj).on('load error', function() {

? ? ? ? opts.each && opts.each(count);

? ? ? ? if (count >=len) {

? ? ? ? ? // 所有圖片已經(jīng)加載完畢

? ? ? ? ? opts.all && opts.all();

? ? ? ? } else {

? ? ? ? ? load();

? ? ? ? }

? ? ? ? count++;

? ? ? });

? ? ? imgObj.src = imgs[count];

? ? }

? },

? PreLoad.prototype._unordered = function () {

? ? var imgs = this.imgs,

? ? ? ? opts = this.opts,

? ? ? ? count = 0,

? ? ? ? len = imgs.length;

? ? $.each(imgs, function(i, src) {

? ? ? if (typeof src != 'string') return;

? ? ? var imgObj = new Image();

? ? ? $(imgObj).on('load error', function() {

? ? ? ? opts.each && opts.each(count); // 如果opts.each存在，執(zhí)行opts.each方法

? ? ? ? if (count >= len - 1) {

? ? ? ? ? opts.all && opts.all();

? ? ? ? }

? ? ? ? count ++;

? ? ? });

? ? ? imgObj.src = src;

? ? });

? };

? // 插件:①附在$.fn上（要選擇一個(gè)元素）；②直接跟在jquery對(duì)象，是一個(gè)工具函數(shù)。(工具方法)

? // $.fn.extend -> $('#img').preload();

? $.extend({

? ? preload: function(imgs, opts) {

? ? ? new PreLoad(imgs, opts);

? ? }

? });

})(jQuery);

一、禁止事件冒泡:e.stopPropagation

1、$btn.on('click',function(){e.stopPropagation});

btn點(diǎn)擊事件冒泡到document，在點(diǎn)擊btn的時(shí)候會(huì)觸發(fā)document的隱藏事件，所以要阻止btn的事件冒泡，是處理btn，而不是document.

一、li*75>img[src="imags/qq/$.jpg"],按了tab之后，$的地方會(huì)從1到75開始計(jì)數(shù)。

db:display:block;

一、插件寫在局部作用域中，就是為了使它和外部的內(nèi)容互不干涉，互不影響。但是js是沒有局部作用域的，我們一般用閉包模擬局部作用域。

(function($) {

? // 面向?qū)ο?/span>

? function PreLoad(imgs, options) {

? ? this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;

? ? this.opts = $.extend({}, PreLoad.DEFAULTS,options); // options和PreLoad.DEFAULTS這2個(gè)對(duì)象融合，生成新的對(duì)象，將新對(duì)象返回給opts保存下來。

? ? this._unordered(); // _表示只在函數(shù)內(nèi)部使用，而不在外部調(diào)用

? }

? PreLoad.DEFAULTS = {

? ? each: null, // 每一張圖片加載完畢后執(zhí)行

? ? all: null? // 所有圖片加載完畢后執(zhí)行

? };

? PreLoad.prototype._unordered = function () {

? ? var imgs = this.imgs,

? ? ? ? opts = this.opts,

? ? ? ? count = 0,

? ? ? ? len = imgs.length;

? ? $.each(imgs, function(i, src) {

? ? ? if (typeof src != 'string') return;

? ? ? var imgObj = new Image();

? ? ? $(imgObj).on('load error', function() {

? ? ? ? opts.each && opts.each(count); // 如果opts.each存在，執(zhí)行opts.each方法

? ? ? ? if (count >= len - 1) {

? ? ? ? ? opts.all && opts.all();

? ? ? ? }

? ? ? ? count ++;

? ? ? });

? ? ? imgObj.src = src;

? ? });

? }

? // 插件:①附在$.fn上（要選擇一個(gè)元素）；②直接跟在jquery對(duì)象，是一個(gè)工具函數(shù)。(工具方法)

? // $.fn.extend -> $('#img').preload();

? $.extend({

? ? preload: function(imgs, opts) {

? ? ? new PreLoad(imgs, opts);

? ? }

? });

})(jQuery);

Math.max(a,?b)?//返回最大值
Math.min(a,?b)?//?返回最小值

一、Image對(duì)象有2個(gè)事件：load, error。

var imgObj = new Image(); // new實(shí)例化image對(duì)象。

$(imgObj).on('load error', function() {});

圖片正常被加載之后，會(huì)觸發(fā)load事件，如果沒有被正常加載，會(huì)觸發(fā)error事件。

一、Math.max(0, --index)，表示先index-1，再與0進(jìn)行比較，取較大的那個(gè)值。

對(duì)應(yīng)的有Math.min()方法。eg:Math.min(0, 1, 3, 5)，得到的是0。

一、css簡寫

（1）tac意為 ? text-align:center;

（2）dib意為 ?display:inline-block;

（3）mt300意為 margin-top:300;

一、圖片的預(yù)加載效果：預(yù)知用戶將發(fā)生的行為，提前加載用戶所需的圖片

二、圖片預(yù)加載效果展示

1、網(wǎng)站的loading頁

2、局部圖片的加載-表情插件

3、漫畫網(wǎng)站

三、圖片預(yù)加載的特點(diǎn)

1、提前加載所需圖片

2、更好的用戶體驗(yàn)

四、圖片預(yù)加載：有序加載、無序加載。

有序無序預(yù)加載整合

預(yù)加載改成插件