项目作者: wendy-poppy

项目描述 :
基于nodeJs的聊天室
高级语言: JavaScript
项目地址: git://github.com/wendy-poppy/chat.git
创建时间: 2016-11-11T11:17:01Z
项目社区:https://github.com/wendy-poppy/chat

开源协议:

下载


chat

今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架

需要的链接有点击这里你可以链接到

在现在绝大部分网站,尤其是一些图片比较多的网站上,为了增加用户的体验网站在加载图片的时候都使用了图片懒加载或图片预加载,两种技术的
本质是完全相反的,一个是迟缓的加载(可能不加载),另一个是是通过提前加载实现的,两者的具体实现的技术并不复杂,下面分别对其分别说明。

初始工作

也叫延迟加载,对网站中出现的图片延迟加载或符合某种条件时才加载某些图片。根据不同的情况的实现的方式也有几种,大致上可分为以下的三种:

  1. 使用定时器对图片进行延时加载(纯粹的延时加载,使用情况不多)
  2. 当符合某些条件,或者触发了某些事件时开始异步的加载图片
  3. 可视区域的延时加载,其实就是对第二条的延伸,即加载图片的条件是在可视区域中,这个实现主要是监听页面的滚动实现的,一般设置是页面滚
    动到该图片的头部时开始加载图片(该方式是是大部分网站使用的懒加载),所以趁热打铁,自己手动写一下该方式的图片懒加载。

首先,简单的讲一下其实现的过程:当访问网站的时候,先把页面的上所有的img元素或是背景图片路径替换成loading图片地址,这样就只需请求一
次,等到页面滚动到一定区,用实际存放img地址的laze-load属性的值去替换src属性,这就可实现根据滚动的图片懒加载。这里提醒大家一点,也
算是一个知识点(雅虎军规中的一条),不要设置空src,就算是src为空,浏览器也会对服务器发送请求。所以平时项目中,尽量不要有空src的script
和img标签。

实现:

1.将页面中需要懒加载的图片保存起来

  1. function getImages() {
  2. var ele = document.getElementsByTagName('img');
  3. for (var j = 0, len2 = ele.length; j < len2; j++) {
  4. //判断当前图片是否要懒加载
  5. if (typeof (ele[j].getAttribute("lazy_src"))) {
  6. //保存进数组
  7. imgs.push(ele[j]);
  8. count++;
  9. }
  10. }
  11. }

2.遍历数组对满足要求的img设置其src

  1. function lazy() {
  2. //图片数量数量为0时则退出
  3. if (!count) return;
  4. //获取当前可视区域的高
  5. var innerHeight = getViewport();
  6. for (var i = 0, len = imgs.length; i < len; i++) {
  7. //获取图片距最顶部的距离(document的最顶部)
  8. var imgTop = getElementViewTop(imgs[i]);
  9. //判断图片是否进入了可视区域
  10. if (imgTop - getScrollTop() < innerHeight) {
  11. imgs[i].src = imgs[i].getAttribute("lazy");
  12. //已加载的图片从数组中删除,数量减一
  13. delete imgs[i];
  14. count--;
  15. }
  16. }
  17. }

3.页面滚动时判断图片是否进入了可视区域

  1. window.onscroll = window.onload = function () {
  2. lazy();//此处应设节流,滚动一下触发了n次 消耗太大。。。
  3. }

使用方法:src设置loading的图片地址,具体图片(宽高已设好)地址写在lazy属性里。在外部调用 lazyLoad.init();

图片预加载

在Web开发中,图片预加载也经常用到,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时间会是一片空白。实现预载的方法有很多多,可以用CSS(background)、JS(Image)、HTML()。这里就讲解最常用的做法,先用一张菊花图 占位,然后用异步的方式加载图片,等图片加载好了再把它填充到img 节点里。

实现:

  1. var MyImage = (function(){
  2. var imgNode = document.createElement( 'img' );
  3. var img = new Image;
  4. var callback;//回调函数处理imgNode
  5. img.onload = function(){
  6. //图片加载完后设置imgNode的src
  7. imgNode.src = img.src;
  8. //回调函数处理该节点
  9. callback.apply(imgNode,arguments);
  10. };
  11. return {
  12. setSrc: function( loading,src ,fn){//菊花图地址 图片地址 回调函数
  13. imgNode.src = loading;
  14. img.src = src;
  15. callback=fn;
  16. }
  17. }
  18. })();

具体代码在github上了,欢迎star。