分类 其他 下的文章
-
小白带你探索WebP
WebP是什么鬼 WebP格式，一种新型的图片格式，其图片压缩体积大约只有JPEG的2/3，而且还能节省大量的服务器带宽资源和数据空间。 这么好的图片格式，如果能运用到实际项目中那就非常棒了。但是又碍于其兼容性问题，于是就有了这个webp fis插件的诞生，暂时叫它fis-postpackager-jpg-towebp。 WebP插件主要实现的功能 jpg --> webp （目前暂时仅处理jpg图片） 替换所有jpg引用（包括样式表里的和页面上的img标签，至于js里面的就不管咯） 判断是否支持webp，然后加载对应的图片格式 插件实现过程 一、选择fis插件的类型 大......
-
初探关于ajax多个请求，但需要全部完成后才能执行的方法
本文主要总结一下需要等待多个ajax请求完成后再执行操作的方法 最近在做一个英雄榜项目遇到一个问题，需要用到6次Ajax来获取各个榜单的数据再进行操作。 一、ajax嵌套ajax，传说中的嵌套金字塔，以及这种方式只能串联发起ajax请求 function getDataFun(){ $.ajax({url: "/equip_rank",type:'GET',dataType:'jsonp',success: function(data1){ $.ajax({url: "/score_rank&......
-
图片懒加载
Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src(也可以约定为其他属性名)属性的值，并赋予img的src，从而实现动态加载图片的机制。 这里需要注意的是： img在初始化的时候不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面: HTML 约定 给img元素添加class="m-lazyload",同时将img src赋值给data-src属性。 <img class="m-lazyload" data-src="imgUrl"......
-
浅谈NIE组件加载方式的变化和原理
这里主要会说说小组组件新旧加载方式的实现方式、优缺点，以及未来展望 旧的方式 一、调用方式： nie.use(["nie.util.share","nie.util.video"],function(){ //do something }); 典型的AMD加载方式，就是按需加载，异步回调，代表作：requirejs 二、实现原理： //以下为简单实现原理，并非代码全部 nie.use = function(modules,callback){ //定义异步请求组件js......
-
WEUI实践
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。 有时候希望做一些比较简洁、对样式没有特定要求的移动端页面，可以考虑直接使用。不过不知道能否通过组里QA同学的测试，将来等QA同学有空时可以安排测试。 以最常用的表单进行示例 信息填写页面： 提交成功页面： 两个页面只引用了库里的example.css文件和weui.css文件。 信息填写页面的代码如下： <!DOCTYPE html......
-
关于嵌套新闻发布系统的一些事
本文主要总结嵌套新闻发布系统遇到的一些问题及解决方法！ 一、移动端-新闻内页中嵌套新闻列表页 如下图，在该新闻内页里面还需要嵌套新闻列表页，并且两者都需要加载更多翻页功能 所以，在这种情况下，内嵌的列表页需要用ajax获取并且实现翻页加载更多功能，链接在此； var _nextHostList="http://stzb.test.nie.163.com/m/qyz/news_list", _nextHost="", _totalPagesList=1, _totalPages=1......
-
记天下手游移动官网踩的坑
周末两天加班制作天下手游移动官网。如下图 git地址为：http://git-wz.gz.netease.com/tx/tx-gw-m-16v1 地址：http://tx.163.com/index.html（在你看到的时候有可能会新版替换） 在制作过程一直到上线在ios下的动画表现都很顺畅。然而上线后第二天，就有编辑来说部分安卓机卡爆了。尝试去掉视差组件parallax.js，小米4卡的程度减轻，但是还是看不了首屏七字动画，而且小米note,红米依然卡。卡到每一次界面有动画就是直接以方格形式从下往上从左往右渲染出动画的最终画面，而看不到动画的过程。 没得说，开始找问题。......
-
聊聊PC端页面适配
PC端适配？什么鬼！！！做不了~ PC端适配？又不早说，都做完了，还适配毛线~ 页面有bug！！！！为什么我笔记本打开只看到一半~ ... 以前谈适配只会想到移动项目，而有时候转做pc端，有一个很爽的感觉就是什么的尺寸都可以写死，不需要担心设备尺寸不同的问题。但是现在越来越多的PC项目也有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。对于宽度，我们规范了主体内容在1200以内，高度只有个最小值规范。 为什么pc需要考虑适配 因为pc需要考虑最小设备主体是1366*768分辨率的14寸普通笔记本，768的高度减去浏览器工具栏和桌面任务栏，实际的可视高度只......
-
关于复制组件的那点事
1. 故事背景 自从Chrome 46屏蔽了Flash自动播放之后，很多小尺寸的Flash在Chrome 46以上都不会自动播放，替代的是一个播放按钮。而我们的复制组件就是基于Flash实现的，因此在Chrome 46以上的浏览器中，初始化后的复制按钮会呈现一个播放按钮，点击后Flash才会运行，之后再点击一下才能够实现复制，交互成本多了一个环节，用户体验就差了，遂需要对组件进行优化，实现Flash和浏览器接口的自主选择，在能使用浏览器接口的浏览器则默认使用浏览器接口，不支持的则使用Flash。 2. 发生了什么事情？ 既然是要用浏览器接口实现，那第一件事就是需要知道各浏览器都为复......
