JavaScript实现页面滚动图片加载(仿lazyload效果)

JavaScript实现页面滚动图片加载(仿lazyload效果)

概述

在网站中,经常会有长页式的页面,滚动页面时会不断加载图片,但是如果在页面的初次加载时一次性加载所有的图片,会给用户带来不必要的流量浪费,同时也会影响页面加载速度。因此,我们可以通过JavaScript实现页面滚动图片加载,去实现对用户体验的优化。

本攻略将介绍一种基于lazyload思路的实现方法,让图片在页面滚动时才进行加载,并且只加载当前可视区域内的图片,这样就可以避免因网页中大量的图片导致的性能问题。

实现方式

  1. 为图片设置占位符
  2. 获取浏览器窗口的高度,计算当前可视区域内的图片
  3. 监听window的scroll事件,滚动时计算出当前可视区域内的图片,等待图片完成加载
  4. 加载完成后将其插入页面,用占位符替换掉

示例说明

示例1:使用jQuery实现

HTML代码:

<div class="container">
  <div class="image">
    <img src="placeholder.png" data-src="image1.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image2.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image3.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image4.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image5.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image6.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image7.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image8.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image9.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image10.jpg" alt="">
  </div>
</div>

JavaScript代码:

$(function() {
  $(window).on('scroll', function() {
    $('.image').each(function(index) {
      if(!$(this).data('loaded') && inViewport(this)) {
        var $img = $(this).find('img');
        $img.attr('src', $img.data('src'))
            .on('load', function() {
              $(this).parent().removeClass('loading');
            });
        $(this).data('loaded', true);
        $(this).addClass('loading');
      }
    });
  });

  function inViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
});

在这个示例中,我们为每个图片设置了一个占位符,使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时,将占位符替换成真实的图片,并为其添加一个loading的class。

示例2:使用原生JavaScript实现

HTML代码:

<div class="container">
  <div class="image">
    <img src="placeholder.png" data-src="image1.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image2.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image3.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image4.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image5.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image6.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image7.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image8.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image9.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image10.jpg" alt="">
  </div>
</div>

JavaScript代码:

window.addEventListener('scroll', function() {
  document.querySelectorAll('.image:not(.loading)').forEach(function(element) {
    if(inViewport(element)) {
      var img = element.querySelector('img');
      img.src = img.dataset.src;
      element.classList.add('loading');
      img.addEventListener('load', function() {
        element.classList.remove('loading');
      });
    }
  });
});

function inViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

在这个示例中,我们也为每个图片设置了一个占位符,使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时,将占位符替换成真实的图片,并为其添加一个loading的class。

总结

通过本攻略的实现方式,我们可以方便地实现页面的滚动图片加载,不仅能够提升用户体验,同时也能够减少页面加载时间和流量消耗。以上就是基于lazyload思路的图片懒加载方案,相信对于想要实现此功能的读者能够有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现页面滚动图片加载(仿lazyload效果) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 微信小程序 教程之小程序配置

    微信小程序教程之小程序配置 小程序配置是开发微信小程序的第一步。本文将为大家讲解小程序配置的详细流程。 1. 注册小程序账号 在开发微信小程序之前,需要先注册小程序账号。注册小程序账号的具体流程可以参考官方文档。 2. 创建小程序应用 注册完成小程序账号后,需要登录小程序平台,然后点击“创建小程序”按钮,进入小程序创建页面。在此页面填写小程序的基本信息,包括…

    JavaScript 2023年6月11日
    00
  • JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)

    在JS中跨页面调用变量和函数可以通过以下几种方法实现: 1. 使用cookie 可以在页面中设置一个cookie,把需要共享的变量值存储到cookie中。然后在另一个页面中读取这个cookie,就能够获得变量值。示例如下: a.js function setCookie(c_name,value,expiredays){ var exdate=new Dat…

    JavaScript 2023年5月27日
    00
  • js 截取或者替换字符串中的数字实现方法

    下面是详细讲解“js 截取或者替换字符串中的数字实现方法”的完整攻略,步骤如下: 1. 利用正则表达式匹配数字 在 JavaScript 中,可以使用正则表达式来匹配字符串中的数字。以下是一个示例代码: const str = "This is 123456 a string with numbers 789"; const number…

    JavaScript 2023年5月28日
    00
  • JavaScript获取当前url根目录(路径)

    获取当前网站的根目录或路径是在一些前端应用程序中非常有用的操作,特别是当需要以相对于网站根目录的方式链接样式表、脚本或图像时。以下是获取当前URL根目录(路径)的攻略: 方法一:使用location对象 可以使用JavaScript的location对象获取当前页面的完整URL,然后使用split()方法和push()方法来分离根目录路径。 var path…

    JavaScript 2023年6月11日
    00
  • JavaScript中交换值的10种方法总结

    JavaScript中交换值的10种方法总结 为什么要交换值? 在JavaScript中,我们通常需要在不同的变量之间交换它们的值。这些变量可以是数字、字符串、布尔值等。通常情况下,我们使用一个临时变量来实现这个目的。但是,将值存储在临时变量中会使代码变得复杂,而且增加了代码的复杂性和可读性。因此,交换两个变量的值是编程中一个常见的问题。 方法一:使用临时变…

    JavaScript 2023年5月27日
    00
  • 跟我学习javascript的异步脚本加载

    下面我就为您详细讲解“跟我学习javascript的异步脚本加载”的完整攻略。 前言 网页应用程序通常需要使用JavaScript来实现复杂的交互逻辑。JavaScript是一种单线程语言,当代码需要联网或执行耗时操作时,会出现页面阻塞的现象,这就导致了JavaScript执行速度直接影响到用户的交互体验。因此,为了解决这个问题,JavaScript提供了一…

    JavaScript 2023年5月27日
    00
  • blob转换成string格式同步调用问题解决分析

    问题描述: 在开发过程中,我们有时会需要将Blob数据类型转换为String类型。Blob对象表示不可变、原始数据的类文件对象。但是,Blob类型的数据转换为String类型时,会涉及到异步回调的执行问题,常常导致数据无法按预期输出或报错。所以,本文将会讲解 Blob转换为String格式的同步调用问题,并提供解决方案。 解决方案: 使用FileReader…

    JavaScript 2023年6月11日
    00
  • 原生JS+HTML5实现的可调节写字板功能示例

    下面是我对于“原生JS + HTML5 实现的可调节写字板功能示例”的攻略详解,包括过程和示例说明: 1. 准备工作 首先,我们需要明确一下目标:实现一个可调节写字板的功能。为此,我们需要对写字板功能的实现进行详细的分析,并列出需要用到的相关技术和工具。 1.1 写字板需求分析 写字板的基本要求是:用户可以在一个空白画布上自由绘画,还可以设置画笔的颜色及粗细…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部