ps按钮制作过程_WEB前端开发
ps按钮制作过程:首先打开ps软件,并制作一个黑色的背景图层;然后点击【椭圆选框工具】绘制一个圆形选框,并将选区填为白色;接着选择一种按钮样式,并点击【自定形状工具】绘制出一种图案样式;最后点击【样式】,并选择另外一种按钮样式确定即可。
什么是预加载:
当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染;在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验;
一张图片的预加载
var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width); function loadHandler(e){ console.log(img.width);//当前图片的原始宽度 }
上面代码中,图片还没加载完成打印图片的宽度时,图片宽度为0;只有等图片加载完成后并写入DOM树渲染后,才去触发load事件的回调函数,才能打印出图片的宽度;
加载多张图片时,要提前在本地进行缓存,下面要讲三种预加载多张图片的例子:
第一种:load预加载
加载100张图片,且图片名为1.jpg~100.jpg(下同);
var num=1; var list=[]; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/"+num+".jpg"; } function loadHandler(e){ list.push(this.cloneNode());//复制当前图片元素 num++; if(num>100){console.log(list);return;} this.src="./img/"+num+".jpg"; //修改地址继续后触发load事件 }
上面代码表示:
1、创建一张图片;
2、给这个图片增加事件侦听load;
3、加载完成后,将加载进来的图片复制一个新的,放在数组中;
4、修改num;如果num的值大于100停止执行,并且打印数组;
5、给这个图片的地址赋予一个新地址,因为改变图片的地址就会重新触发load,所以会继续进入loadHandler函数,不断加载,直到加载完成。
第二种:生成器函数实现预加载
css样式引入方式的优缺点对比_WEB前端开发
本文为大家介绍了css样式引入方式的优缺点对比,具有一定的参考价值,希望可以帮助到大家。
行内样式的优点是:书写方便,权重高;缺点是:没有做到结构样式相分离。
function loadImage(src){ return new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){ resolve(img);//加载时执行resolve函数 } img.onerror=function(){ reject(src+'这个地址错误');//抛出异常时执行reject函数 } img.src=src; }) } function* fn(){ for(let i=1;i<100;i++){ yield loadImage("./img/"+i+".jpg"); } } let s=fn(); let value=s.next().value; resume(); function resume(){ value.then(img=>{ console.log(img);//打印加载的图片标签 value=s.next().value; if(value)resume(); }); }
以上代码表示:
1、执行生成器函数并且一次执行loadImage 函数;
2、在Promise中创建图片;
3、判断图片是否可以加载,加载成功执行Promise的回调函数resolve;
4、执行一次resume函数,并在函数里面执行Promise在resolved状态下的函数
5、反复执行s.next().value,直到全部图片加载完成;
第三种:async/await预加载图片
function loadImage(src){ let p=new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){//加载时执行resolve函数 resolve(img); } img.onerror=function(){ reject(src); } img.src=src; }) return p; } async function fn(){ let arr=[]; for(let i=3;i<80;i++){ await loadImage(`./img/${i}-.jpg`).then(img=>{ arr.push(img); }); } return arr; } fn().then(list=>{ console.log(list);//打印图片数组 })
这种方法是ES6的方法用到了async和await将异步转换为阻塞式同步;
说明:
1、fn 这个函数使用async 表示这个函数是一个异步函数
2、这个函数中就可以使用await ,await作用就是让异步变为同步等待,异步变成了阻塞式等待
3、当异步全部完成时,再继续向后运行
4、async函数中的await后面只能跟的时Promise对象
5、async函数执行后返回的是一个Promise对象
推荐教程:js入门教程
以上就是js实现图片预加载的详细内容,更多请关注ki4网其它相关文章!
ps做春节海报教程_WEB前端开发
ps做春节海报的方法:首先打开ps软件,并新建一个画布;然后将前景色填充淡粉色,并执行【渐变工具】,将第二个点也填充淡粉色;接着导入春节素材,并调整好大小和位置;最后执行【直排文字工具】输入文字部分即可。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)