zoukankan      html  css  js  c++  java
  • 对于富文本编辑器中使用lazyload图片懒加载

    使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orginal的属性表明图片的路径,但是目前在做的项目中使用的是用户自己编辑的内容,不能对这些内容做修改,于是只能是在浏览的时候用js多加一段操作实现这个功能了,
    在文档内容全部写入到页面之后,执行一段js
     
    $(".content img").each(function (index, el) {
    var oImgSrc = $(this).attr("src");
    $(this).attr("src", "").attr("data-original", function () {
    return oImgSrc;
    }); //判断src是否为空,为空添加加载的loading背景图
    if ($(this).attr("src").length == 0) {
    $(this).parent().css({
    "background": "url(images/loading.gif) no-repeat center center",
    "background-size": "20px 20px"
    });
    } else {
    $(this).parent().removeAttr("style");
    };
    });
    该段js的功能就是在将该内容插入到html里面之后,将所有的图片标签加入data-orginal属性,同时对他的父标签添加loading动画,最后在调用lazyload的方法,就能实现完整的功能了.
  • 相关阅读:
    sersync+rsync原理及部署
    rsync同步
    zabbix 3.2.2 agent端(源码包)安装部署
    zabbix配置
    Netbackup media server部署报错
    Oracle_rac命令
    Linux系统克隆为iso镜像盘(类似win gost)
    Nebackup清除磁带数据重新使用
    V7000初始化
    【数据案例】服务器崩溃后的数据恢复方法
  • 原文地址:https://www.cnblogs.com/lxlin/p/8401401.html
Copyright © 2011-2022 走看看