lazyload ajax同步,jQuery lazyload 的重复加载错误以及修复方法

2023-11-15

分析代码也可以知道。

最主要的原因是 写在页面上的 the_big_img_toLoad.jpg一经加载,就去向服务器申请图片地址,加载大图片。

如果想实现原定的效果,则 写在页面上的待加载地址 必须不能是大图片的地址,而我们可以将真正的图片地址数据 存储在alt属性中。

正确的例子如下:

https://www.jb51.net/comstyles/img200-150-3.jpg

https://www.jb51.net/comstyles/img200-150-4.jpg

对原来的 jquery.lazyload.js我们也需要做一点改动:

$(document).ready(function(){

$("#lazy1 img,#lazy2 img").lazyload({

placeholder : "http://sc.jb51.net/style/img/spacer.gif",

effect : "fadeIn"

});

});

完整实例如下:

无标题文档

img{ display:block; border:2px solid #ccc; margin:0 0 10px;}

$(document).ready(function(){

$("#lazy1 img,#lazy2 img").lazyload({

placeholder : "http://qsl.cn/style/img/spacer.gif",

effect : "fadeIn"

});

});

200-150

第一屏高度为900px,滚动到下面的时候,相应图片才开始加载

测试可知 是真正的按需加载。而不是像之前,先加载了,滚动到相应位置 还又加载了一次。

Firebug的眼睛还是雪亮的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

lazyload ajax同步,jQuery lazyload 的重复加载错误以及修复方法 的相关文章

  • 打包aab教程,模拟器安装aab教程

    一 aab 打包 Android App Bundle aab 是谷歌新的安卓安装文件 其实也就是根据 cpu 架构和语言等 切分多个 apk 以减少包体体积 aab 打包有以下两种方式 AS 打包 Android Studio 打包 类型
  • Stack的三种含义

    学习编程的时候 经常会看到stack这个词 它的中文名字叫做 栈 理解这个概念 对于理解程序的运行至关重要 容易混淆的是 这个词其实有三种含义 适用于不同的场合 必须加以区分 含义一 数据结构 stack的第一种含义是一组数据的存放方式 特
  • 高通 Msm835平台充电功能的开发与调试

    目录 平台充电相关代码 835平台kernel充电相关代码 关机充电的系统相关代码 835平台UEFI 充电相关代码 835平台电池曲线 电池曲线大体内容如下 kernel 电池曲线的提交 XBL 关于充电曲线的提交 充电相关调试方法 充电
  • js逆向学习路线指南

    1 js基础教程 耗时2个星期 2个月 视基础而定 主要掌握用js进行程序设计 以及dom相关的知识 反复看 反复编程 并做好笔记 教程 https wangdoc com javascript index html 2 开始进行实战 多看
  • LeetCode 86. 分隔链表 Partition List(C语言)

    题目描述 给定一个链表和一个特定值 x 对链表进行分隔 使得所有小于 x 的节点都在大于或等于 x 的节点之前 你应当保留两个分区中每个节点的初始相对位置 示例 输入 head 1 gt 4 gt 3 gt 2 gt 5 gt 2 x 3
  • 【Dubbo】Dubbo(一)为什么使用Dubbo?

    Dubbo Dubbo是一款Java RPC框架 如何将应用打包并部署到服务器上 之前的单一应用架构 可以部署到多个服务器上 每次修改或扩展某一处功能都要将整个应用重新打包并部署到多台服务器上 协同开发时都改这一个应用 不利于开发与维护 当
  • 解决PyCharm ImportError: No module named tensorflow 详解

    运行 TensorFlow MNIST 实验程序时出错 报错原因 所用到的python解释器和我们当前PyCharm所用的python解释器不一致说导致 故解决方案 将PyCharm的解释器更改为TensorFlow下的python解释器
  • 源码分析shiro认证授权流程

    1 shiro介绍 Apache Shiro是一个强大易用的Java安全框架 提供了认证 授权 加密和会话管理等功能 认证 用户身份识别 常被称为用户 登录 授权 访问控制 密码加密 保护或隐藏数据防止被偷窥 会话管理 每用户相关的时间敏感
  • Qt中的私有信号

    一 什么是Qt私有信号 直接引用Qt文档中的描述 二 私有信号的作用 私有信号只能被响应 不能被用户代码来发射 emit 这是一种对某些信号的权限控制 也就是用户代码没有权力 发号施令 只能由Qt的类来发射 防止信号被 仿造 三 是否可以用
  • python网络爬虫--练习

    一 爬取王者荣耀英雄信息 单页 import json import pymysql import requests from lxml import etree def get heros url response requests ge
  • Linux中执行shell脚本

    在Linux系统下运行 sh文件有三种方法 比如我在root目录下有个test sh文件 第一种 在任何路径下 输入该文件的绝对路径 root test sh就可执行该文件 当然要在权限允许情况下 chmod 777 test sh tes
  • MATLAB二维绘图(一)使用plot函数进行简单绘图

    MATLAB二维绘图 一 使用plot函数进行简单绘图 1 使用plot绘制一个简单的图形 示例 单个参数绘图 clear clc close all t 1 200 y sin t pi 100 plot y t会默认从1开始间隔为1 结
  • 3dmax KeyError: ‘ Alphabet_S‘

    python opengl加载3d模型 报错 原因 mtl文件的name改了 更新一下就可以了 KeyError Alphabet S
  • QGIS-环境配置

    学习笔记 主要用于记录学习过程 及解决问题 如有侵权 请联系我 前言 本人是一名在校学生 应学校要求 学习QT QGIS 进行简单的遥感应用实现 一 学习环境 Windows10 VS2022 QT5 14 2 QGIS3 22 14 二
  • 蓝桥杯——《123》——python组十二届国赛真题

    题目描述 小蓝发现了一个有趣的数列 这个数列的前几项如下 1 1 2 1 2 3 1 2 3 4 小蓝发现 这个数列前 1 项是整数 1 接下来 2 项是整数 1 至 2 接下来3 项是整数 1 至 3 接下来 4 项是整数 1 至 4 依
  • iPhone/iPad如何与Windows10互传文件?

    本文提供共享文件夹的方式实现 例如在win10 D盘新建一个文件夹apple 右键属性 先后在 共享 S 高级共享 D 中设置 点击共享 S 添加Guest 权限设为读取 写入 之后依次点击共享 H 完成 D 按钮 点击高级共享 结果为下图
  • 4.11+4.12实习日志

    1 Qt帮助文档路径 Qt帮助文档路径 E Qt Qt5 9 9 5 9 9 mingw53 32 bin assistant exe 2 对象树 2 1 当创建的对象在堆区时候 如果指定的父亲是QObject派生下来的类或者QObject
  • SpringBoot返回json数据

    1 pom文件
  • uni-app搜索-历史记录

    效果图

随机推荐

  • 自建纯内网iot平台服务,软硬件服务器全栈实践

    基于以下几个考虑 自制硬件设备 mqtt内网服务器 1 米家app不稳定 逻辑在云端或xiaomi中枢网关只支持少部分在本地计算 2 监控homeassistant官方服务有大量数据交互 可能与hass安装小米账户有关 3 硬件 原理图 l
  • 【windTerm

    前言 随着时间的推移 在我们的日常工作中对于 SSH 工具的新鲜感日益不足 好多同学都在寻求一款新奇的 好用的 SSH 客户端 虽然目前市场上现存的 MobaXterm FinalShell CRT Putty Tabby 等工具已经能够满
  • Matlab/Simulink-PSFB移相全桥电路仿真搭建

    1 前言 Simulink零基础 PSFB移相全桥电路仿真搭建 PSFB电路仿真 移相全桥短路仿真 十分钟让你掌握PSFB移相全桥电路的闭环控制 移相全桥 PSFB DC DC转换器经常用于降压高直流母线电压 并在中大功率应用中提供隔离 P
  • python 线程池threadpool(使用篇)

    最近在做一个视频设备管理的项目 设备包括 摄像机 DVR NVR等 包括设备信息补全 设备状态推送 设备流地址推送等 如果同时导入的设备数量较多 如果使用单线程进行设备检测 那么由于设备数量较多 会带来较大的延时 因此考虑多线程处理此问题
  • python定义类的时候继承object类

    区别在于python2和python3 python3继承不继承object类都没有区别 但是python2继承object类的话 可以获得更多的魔术方法 静态方法 类方法的构造 类属性的快速访问 定制类实例的实现方法 PS python2
  • Python request content 和 text 的区别

    Python request content和text的区别 text 返回的是 unicode 型的数据 一般是在网页的 header 中定义的编码形式 content 返回的是 bytes 二级制型的数据 也就是说你如果想要提取文本就用
  • (20181206)在线计算GPS周、北斗周、周内日、年积日、简化儒略日

    介绍两个用于在线计算GPS周 周内日 年积日 简化儒略日的网站 网站一 http www gnsscalendar com 使用说明 网站二 http webapp geod nrcan gc ca geod tools outils ca
  • 根据相同主键,合并其他字段值,形成一条记录(oracle)

    将具有相同的主键INVT PROD ID值 其他列值CLAUSE MEMO CLAUSE TP CD BBCK DT使用 进行合并 形成一条记录 select INVT PROD ID MAX subStr CLAUSE MEMO 3 CL
  • Echarts折线图的部分修改

    x轴刻度的隐藏显示 xAxis axisTick show true false x轴的显示隐藏 xAxis axisLine show true false y轴去掉0刻度线 yAxis min 0 scale true axisLine
  • 基于openlayer4实现多个popu展示

    这个超出屏幕能自动平移 没有试 https blog csdn net qq 27186245 article details 82227282 https blog csdn net qq 27186245 article details
  • spring redis和缓存的应用

    spring redis和缓存的应用 1 在springboot项目中引入redis的包 即在pom xml文件中导入一下依赖 刷新maven可看见右侧依赖 2 使用缓存前在项目启动类 Demo1Application 中开启缓存 3 启动
  • 百度AI加速器-百度智能云千帆大模型平台专项首期开营

    9月2日 3日 百度AI加速器 百度智能云千帆大模型平台专项计划第一期加速营在百度大厦举办 经过为期一个月的招募 上海烯牛信息 北京谷器数据 北京烽火万家 上海知潜等15家AI创业企业入选并参与首期开营仪式 入营企业将获得百度智能云提供的一
  • xshell中文件操作的一些常见Linux命令

    1 文件操作的相关shell命令 文件名 执行这个文件 mv 文件名 文件位置 将文件移动到该位置 cp 文件1 文件2 复制文件1到文件2处 如果文件2没有会创 rm f 删除指定目录下的所有文件 rm rf filename 删除指定目
  • 计算机网络复习5----给主机配置IP地址

    在给主机配置IP地址时 哪一个能使用 A 29 9 255 18 B 127 21 19 109 C 192 5 91 255 D 220 103 256 56 答案为a 解析 B 127用于本地的回环测试不能 所以不能配置给主机 一旦出现
  • 掌握Python的X篇_27_Python中标准库文档查阅方法介绍

    前面的博文介绍了python的基本语法 模块及其导入方法 前人将各种方法封装成模块 库 函数供我们使用 如何去使用前人做好的东西 那就需要去查阅文档 今天就介绍python中官方文档的查阅方式 对于初学者而言 python自带的文档就已经足
  • Python入门最完整的基础知识大全【纯干货,建议收藏】

    前言 作为一个有着9年Python开发经验的老码农 今天我就为大家带来了Python的基础知识点 全篇干货 建议大家动动手指收藏起来 一定能够帮助你顺利入门Python 1 环境搭建 Python由荷兰数学和计算机科学研究学会的Guido
  • unity中,什么是万向锁?

    文章目录 一 介绍 二 解决unity万向锁的方法 一 介绍 在Unity中 万向锁 Gimbal Lock 是指使用欧拉角旋转时可能会出现的一种问题 导致物体的旋转变得不稳定或无法实现所期望的旋转 欧拉角旋转是通过绕三个轴 通常是x y和
  • 使用socket判断http请求或http响应的传输结束

    使用socket判断http请求或http响应的传输结束 先把header直到 r n r n整个地收下来 1 传输完毕就关闭connection 即recv收到0个字节 2 有内容 if Transfer Encoding chunked
  • 用户数据报协议UDP

    UDP的格式 载荷存放的是 应用层完整的UDP数据报 报头结构 源端口号 发出的信息的来源端口 目的端口号 信息要到达的目的端口 UDP长度 2个字节 16位 即UDP总长度为 2 16bit 2 10bit 2 6bit 1KB 64 6
  • lazyload ajax同步,jQuery lazyload 的重复加载错误以及修复方法

    分析代码也可以知道 最主要的原因是 写在页面上的 一经加载 就去向服务器申请图片地址 加载大图片 如果想实现原定的效果 则 写在页面上的待加载地址 必须不能是大图片的地址 而我们可以将真正的图片地址数据 存储在alt属性中 正确的例子如下