网页懒加载js,html懒加载

发布时间：2023-12-08

网页懒加载js,html懒加载

更新：2022-11-20 22:01

本文目录一览：

  1. 图片懒加载和预加载
  2. 网页加载很慢JS或jquery堵塞，导致很久才弹出窗口
  3. [Vue.js中能使用vue-router + webpack 实现懒加载吗](#Vue.js中能使用vue-router + webpack 实现懒加载吗)
  4. [网页打开很慢，加载js和css状态是304 Not Modified，高手们，要怎么解决？](#网页打开很慢，加载js和css状态是304 Not Modified，高手们，要怎么解决？)
  5. 图片懒加载实现原理？
  6. 求一段点击左右滚动，支持懒加载的js代码

图片懒加载和预加载

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式 。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载。 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源 。 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。

<img src="0044449030002.jpg" style="display:none"/>
<script src="./myPreload.js"></script>

PreloadJS 提供了一种预加载内容的一致方式，以便在 HTML 应用程序中使用。预加载可以使用 HTML 标签以及 XHR 来完成。默认情况下，PreloadJS 会尝试使用 XHR 加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。 两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

网页加载很慢JS或jquery堵塞，导致很久才弹出窗口

填写完应该是你表单文件的问题。检查 /Search/index.asp 这个文件。 这个可能是你服务器 ASP 文件问题或者服务器 IIS 的问题，ASP 文件运行慢。

Vue.js中能使用vue-router + webpack 实现懒加载吗

可以，Vue 中提供了路由懒加载的方法，

const Proofread = (resolve) => {
  import('components/proofread/proofread').then((module) => {
    resolve(module)
  })
}

Proofread 为组件名
'components/proofread/proofread' 为路径
这些代码相当于普通加载的：

import Proofread from 'components/proofread/proofread'

网页打开很慢，加载js和css状态是304 Not Modified，高手们，要怎么解决？

304 是使用缓存，不影响网页，查服务器。

  1. 第一步、先确认网络是否丢包，ping 命令检测。
  2. 第二步、检测操作系统资源使用情况（http 服务与数据库）。
  3. 第三步、确认 http 服务是否 hang 死了，http 缓存用满的时候会这样。
  4. 第四步、查数据库链接是否正常。
  5. 第五步、检查数据库的慢查询语句。
  6. 第五、以上步骤都没问题，查程序 bug 去。 ps：如果使用的 MySQL，我建议评估业务量，重新调整数据库使用的内存，别使用默认配置。

图片懒加载实现原理？

图片懒加原理 图片懒加载的原理很简单，就是我们先设置图片的 data-set 属性（当然也可以是其他任意，只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。然后我们计算出页面 scrollTop 的高度和浏览器的高度之和，如果图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。 图片懒加载实现步骤：

  1. 在 main.js 中导入 Vant 中的 Lazyload 指令并注册：
import Vue from 'vue'
import { Lazyload } from 'vant' // 导入懒加载模块
Vue.use(Lazyload) // 注册懒加载指令
  1. 为 van-image 设置 lazy-load 指令属性
<!-- lazy-load设置图片懒加载，是一个自定义指令 -->
<van-image width="90" height="90" :src="item2" lazy-load/>

求一段点击左右滚动，支持懒加载的js代码

HTML

<head>
  <style>
    .right_Frame .ProductSlide { width:792px; height:auto; border:solid 1px #e0e0e0; color:#666; }
    .Slide_Screen { width:790px; height:502px; }
    .Slide_Screen p { width:790px; height:502px; }
    .Slide_List { width:785px; height:110px; margin:10px 0; padding-left:7px; }
    .Slide_List a { float:left; margin-top:10px; border: 0; }
    .Slide_List ul li { width:139px; height:107px; float:left; margin:0 auto; }
    .Slide_List ul li a { width:139px; text-align:center; margin-top:10px; }
    a { color:#666; text-decoration:none;font-size: 10pt; }
    img { border: 0; }
  </style>
</head>
<body>
  <div class="Slide_Screen">
    <div class="right_Frame">
      <div class="ProductSlide">
        <div class="Slide_Screen">
          <img id="bigImg" src="" />
        </div>
        <div class="Slide_List">
          <a href="javascript:changePage(-1);" title="向左"><img src="" alt="向左" /></a>
          <ul id="smallImgList"></ul>
          <a href="javascript:changePage(1)" title="向右"><img src="" alt="向右" /></a>
        </div>
      </div>
      <div class="Projection"></div>
    </div>
  </div>
</body>

JavaScript

<script src="jquery-1.4.js"></script>
<script type="text/javascript">
  var pimgs = [
    {"small":"", "big":"", "desc":"TVpad2“芯”升级，“智”变革"},
    {"small":"", "big":"", "desc":"操控流畅，极致体验"},
    {"small":"", "big":"", "desc":"更多选择，正版认证"},
    {"small":"", "big":"", "desc":"内置wifi，舒适体验"},
    {"small":"", "big":"", "desc":"轻松打造客厅KTV"},
    {"small":"", "big":"", "desc":"互动游戏，自由掌控"},
    {"small":"", "big":"", "desc":"网络通话，全球畅聊"}
  ];
  var pageNo = 1; // 当前页码
  var pageSize = 5; // 每页显示张数
  $(function(){
    initImg(pageNo);
    //loadImage();
  });
  // 预先下载图片
  function loadImage() {
    for (var i = 0; i < pimgs.length; i++) {
      new Image().src = pimgs[i]["big"];
      new Image().src = pimgs[i]["small"];
    }
  }
  // 翻页（op: -1表示向左翻，1表示向右翻）
  function changePage(op) {
    var left = -1; // 向左翻
    var right = 1; // 向右翻
    var pageSum = Math.ceil(pimgs.length / pageSize); // 总页数
    if (op == right) {
      if (pageNo < pageSum) {
        initImg(++pageNo);
      }
    } else if (op == left) {
      if (pageNo > 1) {
        initImg(--pageNo);
      }
    }
  }
  // 显示初始化
  function initImg(pageNo) {
    var start = (pageNo - 1) * pageSize;
    var end = pageNo * pageSize;
    if (end > pimgs.length) {
      end = pimgs.length;
    }
    $("#smallImgList").find("li").remove();
    for (var i = start; i < end; i++) {
      var smallImg = '<li>'+
        '<a href="javascript:void(0)"><img id="small" src="'+ pimgs[i]["small"] +'" big="'+ pimgs[i]["big"] +'" /></a>'+
        '<a href="javascript:void(0)">'+ pimgs[i]["desc"] +'</a>'+
        '</li>';
      $("#smallImgList").append(smallImg);
    }
    // 点击小图时显示对应的大图
    $("#smallImgList").find("li").each(function(){
      var $this = $(this);
      var bigImg = $this.find("#small").attr("big");
      $this.mousedown(function(){
        $("#bigImg").attr("src", bigImg);
      });
    });
  }
</script>

通过 js 加载就实现了 lazyload，希望能帮到你。 这个例子需要导入 jquery 才能正确运行。

推荐文章