前端性能优化之Lazyload

最新推荐文章于 2024-05-09 09:58:29 发布

idongchen

最新推荐文章于 2024-05-09 09:58:29 发布

阅读量6.7k

点赞数

分类专栏： web前端文章标签：前端 JavaScript html

本文链接：https://blog.csdn.net/idongchen/article/details/81145279

版权

前端性能优化之Lazyload

@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]

- 前端性能优化之Lazyload

Lazyload 简介

前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一次性加载完毕，那肯定是要等到花都谢了，loading转的人都崩溃~。今天分享的是Lazyload技术是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。

一、实现思路

页面较长，屏幕的可视区域有限。
不设置页面中img标签的src属性值或者将其指向同一个占位图。
图片的实际地址存在img标签自定义的一个属性中，如：“data-url”。
监听scroll，滚动到某个位置时，动态的将url替换成实际的“data-url”。

二、上代码

html部分(简单示意下结构)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style type="text/css">
      .mob-wrap li{
    list-style: none;width: 100%;height: 345px;}
    </style>
  </head>
  <body>
    <ul class="mob-wrap">
      <li">
        <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK轻松实现社会化功能</p>
      </li>
      <li">
        <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信验证码SDK</p>
      </li>
      <li">
        <i

最低0.47元/天解锁文章

idongchen

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
前端性能优化之Lazyload

前端性能优化之Lazyload@(Mob前端-冬晨)[JavaScript|技术分享|懒加载]前端性能优化之LazyloadLazyload 简介一、实现思路二、上代码三、再优化Lazyload 简介前端工作中，界面和效果正在变得越来越狂拽炫酷，与此同时性能也是不得不提的问题。有些项目，页面长，图片多，内容丰富。像商城页面。如果同步加载时一...
复制链接

扫一扫