24HUI - 图片懒加载(hui-lazy)

简介: 24HUI - 图片懒加载(hui-lazy)

效果图

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI </h1>
</header>
<div class="hui-wrap">
    <div class="hui-common-title" style="margin-top:15px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">懒加载演示</div>
        <div class="hui-common-title-line"></div>
    </div>
    <style>
    #list2 li{width:50%; float:left; margin:5px 0px;}
    #list2 .hui-img-list-content{padding:5px; padding-bottom:10px;}
    #list2 h1{font-size:14px;}
    </style>
    <div class="hui-img-list" id="list2">
        <ul>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/1.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/2.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/3.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/4.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/1.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/2.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/3.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/4.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/1.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/2.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/3.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <img lazySrc="../img/imglist/4.jpg" src="../img/lazy.png" class="hui-lazy" />
                    <div class="hui-img-list-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div style="height:50px;"></div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui.lazyLoad();
</script>
</body>
</html>
目录
相关文章
|
网络安全 虚拟化 Windows
同一个局域网主机中的一台主机连接另一台主机的虚拟机
同一个局域网主机中的一台主机连接另一台主机的虚拟机
|
1天前
|
人工智能 运维 安全
|
4天前
|
SpringCloudAlibaba 负载均衡 Dubbo
微服务架构下Feign和Dubbo的性能大比拼,到底鹿死谁手?
本文对比分析了SpringCloudAlibaba框架下Feign与Dubbo的服务调用性能及差异。Feign基于HTTP协议,使用简单,适合轻量级微服务架构;Dubbo采用RPC通信,性能更优,支持丰富的服务治理功能。通过实际测试,Dubbo在调用性能、负载均衡和服务发现方面表现更出色。两者各有适用场景,可根据项目需求灵活选择。
377 124
微服务架构下Feign和Dubbo的性能大比拼,到底鹿死谁手?
|
6天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程|10分钟搞定安装配置
Qwen3-Coder 挑战赛简介:无论你是编程小白还是办公达人,都能通过本教程快速上手 Qwen-Code CLI,利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例,助你提升效率,体验智能编码的乐趣。
620 107
|
3天前
|
Java 数据库 数据安全/隐私保护
Spring 微服务和多租户:处理多个客户端
本文介绍了如何在 Spring Boot 微服务架构中实现多租户。多租户允许单个应用实例为多个客户提供独立服务,尤其适用于 SaaS 应用。文章探讨了多租户的类型、优势与挑战,并详细说明了如何通过 Spring Boot 的灵活配置实现租户隔离、动态租户管理及数据源路由,同时确保数据安全与系统可扩展性。结合微服务的优势,开发者可以构建高效、可维护的多租户系统。
199 127
|
3天前
|
Web App开发 前端开发 API
在折叠屏应用中,如何处理不同屏幕尺寸和设备类型的样式兼容性?
在折叠屏应用中,如何处理不同屏幕尺寸和设备类型的样式兼容性?
224 124
|
3天前
|
人工智能 数据可视化 测试技术
Coze平台指南(3):核心功能-创建智能体与设计角色
Coze 智能体是由大语言模型驱动,通过提示词设定角色,并借助知识库、插件和工作流扩展能力,以执行特定任务的AI助手。对测试工程师而言,精心设计的智能体可显著提升测试效率与质量,关键是要准确理解测试需求,并将其转化为智能体的角色设定和功能配置。建议进一步学习知识库与工作流,以深化应用。