-
一、li*75>img[src="imags/qq/$.jpg"],按了tab之后,$的地方会从1到75开始计数。
db:display:block;
查看全部 -
Math.max查看全部
-
e.stopPropagation();阻止事件冒泡
查看全部 -
插件1,学会写插件
查看全部 -
if('prew' === $(this).data('control')){
index = Math.max(0,--index);
}else{
index = Math.min(len-1,++index)
}
查看全部 -
2-2 不使用预加载的纯js代码:
window.onload = showPic; var imgs = ['img/banner.jpg', 'img/pic01.jpg', 'img/pic02.jpg', 'img/pic03.jpg'], index = 0, len = imgs.length; function showPic() { var btns = document.getElementsByClassName("btn"); var place = document.getElementById("img"); for (var i=0; i < btns.length; i++) { btns[i].onclick = function() { var control = this.getAttribute("data-control"); "prev" === control ? index = Math.max(0, --index) : index = Math.min(len - 1, ++index); document.title = (index + 1) + "/" + len; place.setAttribute("src",imgs[index]); } } }
当然,那数组imgs里面要换成你的各图片的src;文档结构和视频的一样。
查看全部 -
插件拓展到jquery: $.extend({preload: function(参数1,参数2){ 实例化 构造函数(参数1,参数2) } })查看全部
-
1.预加载类型,有序和无序 2.通过new Image并设置url值实现预加载 3.jquery插件的封装 自调用函数(Jquery对象作参数) 内部一个定义一个构造函数 内部定义一个默认参数对象(包括:自定义的回调方法) 定义插件提供的方法(_unordered和_ordered),并添加到构造函数的prototype原型上 $.extend()将构造函数添加(拓展)到jquery对象查看全部
-
编辑序列列表 快捷方式:
li*75>img[src="images/qqexpression/images$.gif" alt=""]
查看全部 -
一、图片预加载的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);
查看全部 -
一、css简写
(1)tac意为 text-align:center;
(2)dib意为 display:inline-block;
(3)mt300意为 margin-top:300;
查看全部 -
一、图片的预加载效果:预知用户将发生的行为,提前加载用户所需的图片
二、图片预加载效果展示
1、网站的loading页
2、局部图片的加载-表情插件
3、漫画网站
三、图片预加载的特点
1、提前加载所需图片
2、更好的用户体验
四、图片预加载:有序加载、无序加载。
查看全部 -
有序无序预加载整合
查看全部 -
我是不是最帅的查看全部
举报