首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ajax-call之后防止jQuery加载图片

,可以通过以下方法实现:

  1. 使用jQuery的ajax方法发送请求,并在请求成功后执行回调函数。
  2. 在回调函数中,可以使用jQuery的选择器来选择需要加载图片的元素。
  3. 在选择的元素上添加一个自定义属性,例如data-src,用于保存图片的真实地址。
  4. 在回调函数中,使用jQuery的each方法遍历选择的元素。
  5. 在遍历的过程中,可以使用jQuery的attr方法获取自定义属性data-src的值,并将其赋值给元素的src属性,从而加载图片。
  6. 为了防止在ajax请求过程中加载图片,可以在发送ajax请求之前,将需要加载图片的元素的src属性设置为空字符串或者一个占位图片的地址。
  7. 在回调函数中,可以根据需要对加载的图片进行一些处理,例如添加加载动画、设置图片大小等。
  8. 如果需要延迟加载图片,可以使用jQuery的lazyload插件或者Intersection Observer API来实现。

这种方法可以有效地控制图片的加载时机,避免在ajax请求过程中加载图片,提升页面加载速度和用户体验。

推荐的腾讯云相关产品:腾讯云对象存储(COS) 产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery实现图片加载

一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片...2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。...jQuery中,获取元素高度的函数有3个,它们分别是height()、 innerHeight()、 outerHeight()。...元素第一次出现时控制台打印 true,以后再次出现不做任何处理。用代码实现 <!...isLoaded($(this)) ){ //若图片出现在可是区域且没有加载加载图片 loadImg($(this))

13.6K20
  • JQuery图片加载

    由于现在很多的网站都带有大量的图片,而图片加载又会特别的慢,特别是移动端,懒加载就显的特别重要了,说白了就是按需加载,用户要看到哪里就显示哪里,下面来记录一下懒加载的基本实现步骤!...1.引入jquery.js与jquery.lazyload.js,由于jquery.lazyload.js依赖于jquery,所以必须要引入jquery <script type="text/javascript...//<em>图片</em>在距离屏幕 200 像素时提前<em>加载</em>.     ...threshold: 200,     //将<em>图片</em><em>加载</em>放进click事件中(不常用)     event:"click",       //加载隐藏的图片(不常用)     skip_invisible...: false     //其他配置项请查看官网   }); } 3.调用懒加载动态加载img时添加class="lazy",并配置自定义属性data-original="请求的图片地址

    4.6K10

    Bitmap图片压缩,大图加载防止OOM

    为了防止加载 Bitmap 的时候造成 OOM 崩溃,我们首选要知道: 一张图片加载到 Bitmap 的时候的占用的是怎么内存计算; 占用内存过高的时候怎么进行图片压缩减小内存占用; RGB介绍 RGB...Bitmap压缩 压缩原理 Android 中进行图片压缩是非常常见的开发场景,主要的压缩方法有两种:其一是下 采样压缩,其二是 质量压缩。...前者是降低图像尺寸,改变图片的存储体积; 后者则是不改变图片尺寸的情况下,通过损失颜色精度,达到相同目的; 压缩Bitmap磁盘占用空间的大小 //如果成功地把压缩数据写入输出流,则返回true。...计算图片的内存占用 这篇文章有详细讲解。 使用inSampleSize进行压缩 既然图片尺寸已知,便可用于确定应将完整图片加载到内存中,还是应改为加载下采样版本。...以下是需要考虑的一些因素: 在内存中加载完整图片的估计内存使用量。 根据应用的任何其他内存要求,您愿意分配用于加载图片的内存量。 图片要载入到的目标 ImageView 或界面组件的尺寸。

    2.7K00

    Bitmap图片压缩,大图加载防止OOM

    在这里插入图片描述 前言 Android官网中处理位图 和 高效加载大型位图 这两篇文章中已经做了很明确指出了如何高效的加载大图。...为了防止加载 Bitmap 的时候造成 OOM 崩溃,我们首选要知道: 一张图片加载到 Bitmap 的时候的占用的是怎么内存计算; 占用内存过高的时候怎么进行图片压缩减小内存占用; RGB介绍 RGB...Bitmap压缩 压缩原理 Android 中进行图片压缩是非常常见的开发场景,主要的压缩方法有两种:其一是下 采样压缩,其二是 质量压缩。...前者是降低图像尺寸,改变图片的存储体积; 后者则是不改变图片尺寸的情况下,通过损失颜色精度,达到相同目的; 压缩Bitmap磁盘占用空间的大小 //如果成功地把压缩数据写入输出流,则返回true。...计算图片的内存占用 这篇文章有详细讲解。 使用inSampleSize进行压缩 既然图片尺寸已知,便可用于确定应将完整图片加载到内存中,还是应改为加载下采样版本。

    2K20

    延迟加载图片jQuery插件-Lazy Load Plugin for JQuery

    Lazy Load是一个用Javascript写得jQuery插件。它可以使一个长网页中,不在当前视图中的图片延迟加载,以提高页面的载入速度。...使用方法 页面头部加入插件 使用图片的地方,使用下面的设置 src是替换图片,一般使用1*1像素的图片替代。后面data-original才是真正的图片。...然后在你的代码中加入,就可以了 $("img.lazy").lazyload(); 设置延迟加载参数 $("img.lazy").lazyload({ threshold : 200 }); 这样,图片就可以距离显示区域...200像素的时候就开始预先加载。...使用特效 $("img.lazy").lazyload({ effect : "fadeIn" }); 默认延迟加载使用show方法来显示图片,可以用这个方法来改变图片的显示方法。

    3.7K10

    实现图片加载jquery.scrollLoading.js

    首先需要jquery.min.js插件,我用的是jQuery v2.1.3,大家可以去百度搜很多自己引入全局顶部即可,当然你的程序自带就不需要在引用JQ了。...第一步 找到你的全局顶部文件,上面已经说了如果你程序自带jq就忽略即可,大概就这样吧 第二步 找到你的底部文件,增加两段jspiex.gif为你要首次懒加载图片图片大家可以自己去找或者用我的 点击查看懒加载图片...实在不懂是哪个建议先进入到你的文章页按F12打开控制台看看加载了哪个js就扔进去 (function($) { $.fn.scrollLoading = function(options) {...posb > 0 && posb <= contHeight)) { if (url) { //浏览器窗口内...loading(); //滚动执行 params.container.bind("scroll", loading); }; })(jQuery

    2.2K20

    延迟加载图片jQuery 插件:Lazy Load

    ,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。...Lazy loader 是一个延迟加载图片jQuery 插件,一些图片非常多的网站中非常有用,在在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说...,可以加载的更快,并且还能节省服务器带宽。...Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后加载 Lazy Load 的 Javascript 文件: <script src="<em>jquery</em>.js...然后<em>在</em>页面的 header 添加如下代码即可: $(document).ready(function(){ $(

    1.9K40

    基于jQuery或Zepto的图片延迟加载插件

    当我们网站的页面图片过多时,加载速度就会很慢。尤其是用手机2G/3G访问页面,不仅页面慢,而且还会用掉很多流量。...我们主题之前也都采用了图片的懒加载形式,但都不完美,部分主题还采用了占位图片来控制懒加载,今天换一种js图片加载,它原理就是将页面内所有需要加载图片全部换成一张默认的图片(一般尺寸很小),只有图片在可视区域才去请求加载...实现原理 页面打开时首先会加载src里的图片,即很小的加载图;通过监听scroll...事件,当图片在可视区域时,使用data-src替换src,加载真正的图片。...sui框架里必须指定 }); }); 代码记录完成,测试几天看看效果,如无问题后续逐一更新,如遇问题依情况而定,好了,假期回来之后工作肯定不少,抓紧时间工作去吧,有问题留言反馈!

    3.2K20

    利用Jquery Lazyload JS插件实现网页图片延迟加载

    skip_invisible : false, // appear: 用于图片加载之前到显示图片之间的处理函数,一般用于展示加载动画....appear: function() {}, // load: 用于图片加载完毕之后执行的函数....如设置为200, 表示滚动条离目标位置还有 200 的高度时就开始加载图片, 可以做到不让用户察觉。...如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .8, appear: 默认值 nullappear: 用于图片加载之前到显示图片之间的处理函数,一般用于展示加载动画...此图片用来占据将要加载图片的位置, 待图片加载时, 占位图则会隐藏接下来的两个是兼容低版本的属性, 该版本中正常使用.11, effectspeed : 毫秒数effectspeed: 用于控制动画的速度

    8.4K71

    jquery scroll 滚动加载列表 获取腾讯云图片像素信息

    jquery scroll 滚动加载列表 获取腾讯云图片像素信息 场景描述 问题处理 其他问题处理 场景描述 bootstarp列表加载图片时需要同时获取图片的像素(宽and高),对于腾讯云这类远程存储获取图片来说...,虽然也可以通过java后台调用腾讯云接口获取图片像素,但是列表加载大量图片并且没有分页的情况下,如果通过后台逐个获取图片像素信息返回给前台页面渲染的话,会导致前台页面迟迟加载不出来,且有浏览器内存耗尽卡死的风险...,并且腾讯云获取图片像素信息的接口还有频限100的限制,这就更导致了通过后台获取图片像素方案的不适用,那么如果通过页面jquery获取图片像素的时候当图片量很大的时候也是会出现卡顿,加载慢的情况,这个时候就考虑的热区内图片展示像素...,防止资源消耗过多 return false; } }) } else { // 所有图片都已加载,禁止事件监听...,防止资源消耗过多 return false; } }) } else { // 所有图片都已加载,禁止事件监听 $('#tableDiv').off

    8410

    缓冲加载图片jQuery 插件 lazyload.js 使用方法详解

    Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。...而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。...你可以使用以下代码,加载这几个文件: <script src="<em>jquery</em>.lazyload.js...你可以使用event属性,设置你自己的<em>加载</em>事件,<em>之后</em>你可以自定义触发这个事件的条件,然后去<em>加载</em>图像。...$("img.lazy").lazyload({ event : "click" }); 自定义显示效果 默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。

    2.9K10

    jQuery中find&filter、live&bind对比介绍及图片加载

    之所以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live某些情况下是不能够完全替代bind的。...jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。...: 图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度...当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片加载之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。...将整个窗口看成是一个大容器,那么也可以页面中设置一个小容器,小容器中也同样可以实现图片的延迟加载。 实例插件下载地址:http://pan.baidu.com/s/1c01sSaW

    70631

    你还在用jquery.lazyload这个坑爹的图片分屏加载插件么?

    百度搜索“图片分屏加载”,映入眼帘的就是jquery.lazyload,相信很多人用过,或许现在还在用,今天我就来说说这个插件的严重BUG。   何为图片分屏加载?...关于jquery.lazyload的demo,大家可以看一下:demo   我们发现,第一屏内的图片,是正常加载了,当滚动到第二张的时候,过了几秒,也渐显出来了,似乎没什么大问题。...之后,我看了下lazyload的源码,其实逻辑上都是OK了,把img的src里的值,存放到自定义的original属性里,当图片滚动到浏览器可视区域内时,再把original里的值赋回到src里,实现分屏加载...网上有篇修改jquery.lazyload的文章,大家可以搜搜,不过我试了下,还是不行,直接不加载了。   ...关于这问题的解决方法,就是换插件,我找到另一个分屏加载的插件,叫:jquery.scrollLoading,具体说明可以看下这篇文章《jQuery页面滚动图片等元素动态加载实现》,这个插件真正实现了图片分屏加载

    56140

    WPF 对接 Vortice Direct2D 绘制从 WIC 加载图片

    本文告诉大家如何通过 Vortice Direct2D 里面绘制图片图片的来源是 WIC 加载出的图片 在上一篇博客告诉了大家如何对接 Vortice 调用 WIC 加载图片,上一篇博客是将 WIC...本文将告诉大家如何在 Direct2D 里将 WIC 加载图片绘制 核心的两个点就是用拿到的 IWICBitmapFrameDecode 进行 IWICFormatConverter 转换图片格式,转换为...Format32bppPBGRA 对 Direct2D 友好的格式,再通过 CreateBitmapFromWicBitmap 方法转换为 ID2D1Bitmap 加入绘制 通过上一篇博客可以了解到如下代码可以加载本地图片文件到...可以通过将图片转换为贴图画刷的方式然后通过矩形或其他几何承载,如以下的代码将图片绘制矩形上,通过矩形控制绘制在哪个范围 using D2D.ID2D1Bitmap d2DBitmap...https://github.com/lindexi/lindexi_gd.git git pull origin 1e2b04cdfd620ec666e6dbcf58b561dae575e9c1 获取代码之后

    35320

    实现图片加载(及优化相关)

    2、预加载 幻灯片、相册等,可以使用图片加载,将当前展示图片的前一张和后一张优先下载。初始化的时候获得图片的src之后为每一个元素提前添加图片的地址路径。...保证第二张图片显示的时候已经加载到页面当中.(应用于轮播、相册、幻灯片等图片需要进行切换显示的地方)。 一、效果展示 图片加载演示视频 二、实现代码 图片加载 * { margin: 0; padding: 0...> 三、优化相关 以上代码案例仅作为简单实现,实际使用中可以进行封装和优化,列举几栗: 已经懒加载完成的元素添加指定class类名,防止重复监听 使用防抖函数,控制触发频率 使用getboundingClientRect...或IntersectionObserver(性能较好,但是有兼容性问题) jquery.lazyload.js ---- 标签:JavaScript,jQuery图片加载 ---- 更多演示案例,查看

    1.2K10
    领券