Html图片懒加载动画,js实现图片懒加载效果

本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载;#div{width:575px;height:auto;overflow:hidden;border:red1pxsolid;margin:0auto;/*给该div设置定位*/position:relative;}#divimg{width:…

大家好,又见面了,我是你们的朋友全栈君。

本文实例为大家分享了js图片懒加载的具体代码,供大家参考,具体内容如下

图片懒加载,思路:当鼠标滑动到对应图片的高度时,进行图片的加载;

#div{

width: 575px;

height: auto;

overflow: hidden;

border: red 1px solid;

margin: 0 auto;

/*给该div设置定位*/

position: relative;

}

#div img{

width: 267px;

height: 396px;

margin-left: 10px;

border: 1px solid #000;

}

function getPos(obj){

var l = 0;

var t = 0;

while(obj){

l += obj.offsetLeft;

t += obj.offsetTop;

obj = obj.offsetParent;

}

return {left:l ,top : t}

}

window.onload = window.onscroll = function(){

//获取到img

var aImg = document.getElementsByTagName(“img”);

//获取到它的scrollTop 值 考虑兼容问题

var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// clientHeight = 上下padding + height

var clientH = document.documentElement.clientHeight;

//循环遍历每一项通过调用获取到每一个i 项对象的top 值

for (var i = 0;i

var aImgTop = getPos(aImg[i]).top;

// 当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大

// 如果大或等于说明滚动到当前位置可以加载图片

if (oScrollTop + clientH >= aImgTop) {

// 进行图片的加载

aImg[i].src = aImg[i].getAttribute(“_src”);

}

}

}

当有类似于瀑布流的布局时常用的加载模式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126919.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c++入门教程–-6循环语句

    c++入门教程–-6循环语句

  • python破解wifi(暴力破解wf)

    自己家的网路实在是差劲的一批…然后电脑打开WiFi,发现了有及格信号还蛮不错的WiFi,于是…就开始了愉快的Python之旅~~~主要步骤获取第一个无线网卡断开断开所有的wifi读取密码本设置睡眠时间fromtkinterimport*frompywifiimportconstimportpywifiimporttime#主要步骤:#1、获取第一个无线网卡#2、断开所有的wifi#3、读取密码本#4、设置睡眠时间#测试连接defwi

  • LinkedList浅析

    LinkedList浅析LinkedList简介LinkedList是一个继承于AbstractSequentialList的双向链表。它也可以被当作堆栈、队列或双端队列进行操作。LinkedList实现List接口,能对它进行队列操作。LinkedList实现Deque接口,即能将LinkedList当作双端队列使用。LinkedList实现了Cloneable接口,即覆盖了函数clon…

  • 保姆级教程,Linux静态IP设置的技巧

    保姆级教程,Linux静态IP设置的技巧介绍如何使用VMware虚拟机Linux系统的Ubuntu16.04发行版进行静态IP设置。设置固定IP非常重要,可以避免因IP的改变,而导致原本搭建的环境失效等情况的出现。

  • Centos7安装nginx1.8.0步骤

    Centos7安装nginx1.8.0步骤前言Nginx(enginex)是一个高性能的HTTP和反向代理web服务器nginx安装环境》nginx是C语言开发,建议在linux上运行,本教程使用Centos7作为安装环境。gcc安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,(一)安装gcc:yuminstallgcc-c++PCREPCRE(PerlCompatibleRegularExpressions)是一个Perl库,包括perl兼容的正则表达式库。ng

  • 各种机械键盘轴的差别,究竟什么轴好

    各种机械键盘轴的差别,究竟什么轴好

    2021年12月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号