适用于 移动页面的图片延时加载

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量99 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/felumanman/blog/478424
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
li{
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 50px;
    width: 40%;
    list-style: none;
    overflow: hidden;
}
li img{
    display: block;
}
.top, .footer{
    position: fixed;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #00ae93;
    color: #fff;
    z-index: 100;
}
.top{
    top: 0;
}
.footer{
    bottom: 0;
}
.list{
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    z-index: 10;
}
</style>
</head>
<body>
    <div>
        顶部导航
    </div>
    <div>
        <ul>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
            <li>
                <img src="images/test.gif" data-echo="images/test.jpg" width="100%">
            </li>
        </ul>
    </div>

    <div>
        底部导航
    </div>
</body>
</html>
<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
echo.init();
</script>

查看演示      源码

转载于:https://my.oschina.net/felumanman/blog/478424

chenxiayin2741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一段实现页面上的图片延时加载的js代码
10-29
### 实现页面上的图片延时加载的JS代码详解 #### 一、背景介绍与应用场景 在Web开发过程中，为了提高用户体验以及网站性能，开发者经常采用各种优化策略来减少页面加载时间。其中一种常见且有效的方法就是图片延时...
图片延迟加载的实现代码(模仿懒惰)
09-05
图片延迟加载，也被称为懒加载（Lazy Load），是一种优化网页性能的技术。它的核心思想是只加载用户当前可视区域内的图片，而将其他未在视口内的图片暂时不加载，直到用户滚动页面到相应位置时再进行加载。这种技术...
HTML5性能优化方法，延迟加载
DJCBPL的专栏
11-05 1417
方法一：直接把加载的文件放到文档的底部 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=0"> <title>BCM登录</title> <!-- 地
html5延迟加载效果,网站性能延迟加载图像的五种技巧(小结)
weixin_34803738的博客
06-05 785
由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。即使经过适当的优化，图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能，它们会失去耐心，转向其他地方，除非你能想出一个不影响速度感知的图像加载解决方案。在本文中，您将学习有关延迟加载图像的五种方法，您可以将这些方法添加到web优化工具包中，以改进站点上的用户体验。什么是延迟加载...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
weixin_33743661的博客
09-30 856
本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。 这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。 一、实现HTML网页保存为图片 1.1 已知可行方案 现有已知能够实现网...
延迟页面中html的加载,网站性能延迟加载图像的五种技巧
weixin_29219189的博客
06-03 530
由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。即使经过适当的优化，图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能，它们会失去耐心，转向其他地方，除非你能想出一个不影响速度感知的图像加载解决方案。在本文中，您将学习有关延迟加载图像的五种方法，您可以将这些方法添加到web优化工具包中，以改进站点上的用户体验。什么是延迟加载...
图片延迟加载
07-15
图片延迟加载，也被称为懒加载（Lazy Loading），是一种优化网页性能的技术，主要应用于网页中的图像显示。这种技术的核心思想是不立即加载所有图片，而是等到用户滚动到它们即将出现在视口时才开始加载。这样可以...
图片懒加载（延迟加载）
08-13
图片懒加载，也称为延迟加载或On-Demand Loading，是一种优化网页性能的策略，尤其在图像密集型网站中效果显著。这种技术的核心思想是只在用户滚动到图像时才加载它们，而不是一次性加载所有页面资源。这样可以减少...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 473
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1303
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1084
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 102
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 649
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 927
el-menu根据多层树形结构递归遍历展示菜单栏
爬虫基本原理入门
RHeng的博客
07-25 835
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 155
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 201
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 198
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
美团前端性能优化实践：首屏加载与RN/H5页面优化
前端页面加载性能优化是提升用户体验的关键因素，尤其是在移动应用中。文档指出，页面加载时间直接影响用户留存率，例如，每增加1秒的加载时间可能导致10%的用户流失。为了改善这种情况，王梓童提出了多个优化措施：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值