欢迎光临小鱼网个人网站!

登录/注册
html5页面优化

1.图片优化统一配置lazyload的参数

$(".main_content img").lazyload({
 placeholder: "/images/msge.gif",
 threshold:200
 });

再来看到lazyload的源代码,可视范围判断上下左右,写的十分完善

$.belowthefold = function(element, settings) {
 var fold;
 if (settings.container === undefined || settings.container === window) {
 fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
 } else {
 fold = $(settings.container).offset().top + $(settings.container).height();
 }
 return fold <= $(element).offset().top - settings.threshold;
 };
 $.rightoffold = function(element, settings) {
 var fold;
 if (settings.container === undefined || settings.container === window) {
 fold = $window.width() + $window.scrollLeft();
 } else {
 fold = $(settings.container).offset().left + $(settings.container).width();
 }
 return fold <= $(element).offset().left - settings.threshold;
 };
 $.abovethetop = function(element, settings) {
 var fold;
 if (settings.container === undefined || settings.container === window) {
 fold = $window.scrollTop();
 } else {
 fold = $(settings.container).offset().top;
 }
 return fold >= $(element).offset().top + settings.threshold + $(element).height();
 };
 $.leftofbegin = function(element, settings) {
 var fold;
 if (settings.container === undefined || settings.container === window) {
 fold = $window.scrollLeft();
 } else {
 fold = $(settings.container).offset().left;
 }
 return fold >= $(element).offset().left + settings.threshold + $(element).width();
 };
 $.inviewport = function(element, settings) {
 return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
 };

2.预加载资源js中加载图片

var img = new Image();
img.src="/images/banner.jpg";

3.我们项目内往往会引用多个javascript脚本,和多个css样式文件,所以可以把多个脚本合并到一个js文件内,然后统一引用它就能减少http请求.这里uglify-js和 clean-css 都支持多个文件合并压缩输出

>uglifyjs js1.js js2.js -m -o merge.js
>cleancss -o megar.css style1.css style2.css

4.离线存储<html manifest=”/mobile.manifest”>

CACHE MANIFEST
##需要离线的内容
CACHE:
Script/jquery.js
Script/gameconfig.js
Image/home.png
Image/logo.png
##总是访问网络的内容
NETWORK:
*
##访问A失败时访问B
FALLBACK

Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。