Jquery.ScrollLoading图片延迟加载技术

二进制诗人
• 阅读 3286

关于分屏加载图片,像天猫、京东等电商图片较多页面很长,就采用了延迟加载技术。

目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,

随着页面的滚动,显示区域图片才被动态加载。

原理其实很简单,默认<img>标签中设置一个特别小的让人看不见的图片作为原始src路径,

再自定义一个属性存放原图片路径,通过绑定滚动事件,检查当前元素是否在浏览器窗口中,

然后替换src路径动态加载图片。

<!--more-->

在这里分享下~

下载demo

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源Vue.jsElementUI优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用ElementUI
非常实用的GitHub项目
CoilCoil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。示例如
希望的天 希望的天
4年前
Android-图片加载库Coil使用教程
框架介绍Coil是Android上的一个全新的图片加载框架,它的全名叫做coroutineimageloader,即协程图片加载库。与传统的图片加载库Glide,Picasso或Fresco等相比。该具有轻量(只有大约1500个方法)、快、易于使用、更现代的API等优势。它支持GIF和SVG,并且可以执行四个默认转换:模糊,圆形裁剪,灰度和圆角。
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
Stella981 Stella981
3年前
Egret白鹭开发小游戏之自定义load加载界面
刚接触不久就遇到困难自定义loading。想和其他获取图片方式一样获取加载界面的图片,结果发现资源还没加载就需要图片,在网上百度了许多,都没有找到正确的方式,通过自己的摸索,终于,,,我成功了。。。下面介绍一下主要思想:首先,我们需要使用异步加载的方式,在加载界面之前加载loading界面需要的素材,然后再loadingUI中就可以大胆使
Stella981 Stella981
3年前
LayaAir使用原生Video视频播放以及Video监听事件
1.原生Video的基本属性src:视频的属性,url地址poster:视频封面,没有播放时显示的图片preload:预加载|none|metadata(部分预加载)|auto。默认为autoautoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高
Stella981 Stella981
3年前
JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果
Ajax说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次css部分用的是html5css3的新属性,图片会自动添加到每行的最顶端上去,而不是用js去判断。去除了一些js计算的麻烦。css部分:
Stella981 Stella981
3年前
Fastdfs安装_nginx进行图片动态压缩
说明1.因为上传的图片较大,部分页面直接引用图片地址,则造成页面加载缓慢问题。2.考虑到服务器空间问题,我们没有进行上传缩略图。仅仅是上传了原图3.为了优化页面加载图片的时间问题,所以对图片进行动态缩放。PS:如果访问量较高,建议进行存储缩略图图片缩放采用nginx的http\_image\_filter\_module
深入理解 Flutter 图片加载原理 | 京东云技术团队
Flutter官方为我们提供了Image控件可实现图片的加载及显示,Image控件本身是一个StatefulWidget,那么在图片显示过程中是如何加载及显示出来的呢?本篇文章将逐步分析Flutter中图片加载原理,理解了Flutter图片源码的加载原理后对我们有什么帮助?
融云IM即时通讯 融云IM即时通讯
6个月前
融云IM干货丨有没有插件能帮我优化uni-app的页面加载速度?
根据您的需求,以下是一些可以帮助优化uniapp页面加载速度的插件和方法:1.图片懒加载插件:使用图片懒加载可以显著减少首屏的加载时间。可以在页面滚动时才加载图片,减少初次加载的压力。2.代码拆分和懒加载:根据页面和功能的使用情况,将代码拆分为多个模块,并
上海张律师 上海张律师
22小时前
LoadingProgress组件的使用##HarmonyOS应用开发##
​在应用开发的过程中,经常有需要表示“加载中”或者“请等待”的这么一个状态提示,我原来的做法是会通过找一张gif图片来表示这一状态,但是如果使用gif图片的话,会有以下几个问题1.在不同页面中,需要显示不同的颜色来适配页面的整体配色风格,但是gif动图是不