-
一、圖片預加載的3個步驟
1、實例化一個Image對象。
2、監聽它的load、error事件。
3、為src附上正確的圖片路徑。
查看全部 -
(function($) {
? // 面向對象
? function PreLoad(imgs, options) {
? ? this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
? ? this.opts = $.extend({}, PreLoad.DEFAULTS, options); // options和PreLoad.DEFAULTS這2個對象融合，生成新的對象，將新對象返回給opts保存下來。
? ? if (this.opts.order === 'ordered') {
? ? ? this._ordered();
? ? } else {
? ? ? this._unordered(); // _表示只在函數內部使用，而不在外部調用
? ? }
? }
? PreLoad.DEFAULTS = {
? ? order: 'unordered', // 無序預加載
? ? each: null, // 每一張圖片加載完畢后執行
? ? all: null? // 所有圖片加載完畢后執行
? };
? 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) {
? ? ? ? ? // 所有圖片已經加載完畢
? ? ? ? ? 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存在，執行opts.each方法
? ? ? ? if (count >= len - 1) {
? ? ? ? ? opts.all && opts.all();
? ? ? ? }
? ? ? ? count ++;
? ? ? });
? ? ? imgObj.src = src;
? ? });
? };
? // 插件:①附在$.fn上（要選擇一個元素）；②直接跟在jquery對象，是一個工具函數。(工具方法)
? // $.fn.extend -> $('#img').preload();
? $.extend({
? ? preload: function(imgs, opts) {
? ? ? new PreLoad(imgs, opts);
? ? }
? });
})(jQuery);
查看全部 -
一、禁止事件冒泡:e.stopPropagation
1、$btn.on('click',function(){e.stopPropagation});
btn點擊事件冒泡到document，在點擊btn的時候會觸發document的隱藏事件，所以要阻止btn的事件冒泡，是處理btn，而不是document.
查看全部 -
一、li*75>img[src="imags/qq/$.jpg"],按了tab之后，$的地方會從1到75開始計數。
db:display:block;
查看全部 -
一、插件寫在局部作用域中，就是為了使它和外部的內容互不干涉，互不影響。但是js是沒有局部作用域的，我們一般用閉包模擬局部作用域。
(function($) {
? // 面向對象
? function PreLoad(imgs, options) {
? ? this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
? ? this.opts = $.extend({}, PreLoad.DEFAULTS,options); // options和PreLoad.DEFAULTS這2個對象融合，生成新的對象，將新對象返回給opts保存下來。
? ? this._unordered(); // _表示只在函數內部使用，而不在外部調用
? }
? PreLoad.DEFAULTS = {
? ? each: null, // 每一張圖片加載完畢后執行
? ? all: null? // 所有圖片加載完畢后執行
? };
? 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存在，執行opts.each方法
? ? ? ? if (count >= len - 1) {
? ? ? ? ? opts.all && opts.all();
? ? ? ? }
? ? ? ? count ++;
? ? ? });
? ? ? imgObj.src = src;
? ? });
? }
? // 插件:①附在$.fn上（要選擇一個元素）；②直接跟在jquery對象，是一個工具函數。(工具方法)
? // $.fn.extend -> $('#img').preload();
? $.extend({
? ? preload: function(imgs, opts) {
? ? ? new PreLoad(imgs, opts);
? ? }
? });
})(jQuery);
查看全部 -
Math.max(a,?b)?//返回最大值 Math.min(a,?b)?//?返回最小值
查看全部 -
一、Image對象有2個事件：load, error。
var imgObj = new Image(); // new實例化image對象。
$(imgObj).on('load error', function() {});
圖片正常被加載之后，會觸發load事件，如果沒有被正常加載，會觸發error事件。
查看全部 -
一、Math.max(0, --index)，表示先index-1，再與0進行比較，取較大的那個值。
對應的有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;
查看全部 -
一、圖片的預加載效果：預知用戶將發生的行為，提前加載用戶所需的圖片
二、圖片預加載效果展示
1、網站的loading頁
2、局部圖片的加載-表情插件
3、漫畫網站
三、圖片預加載的特點
1、提前加載所需圖片
2、更好的用戶體驗
四、圖片預加載：有序加載、無序加載。
查看全部 -
有序無序預加載整合
查看全部 -
預加載改成插件
查看全部 -
index = math.max(0,--index);查看全部
-
'prev' === $(this).data('control')，這種寫法有效的規避判斷條件寫錯的問題！查看全部
-
emmet語法查看全部
舉報