如何在ajax调用后重新加载img attr "src“，而不知道镜像标签中的文件名？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

3分钟搞定图片懒加载

而且，用户可能只翻看一两页就退出了，剩下未查看的图片也就不需要加载了。这也相当于节省了带宽资源。懒加载实现原理由于浏览器会自动对页面中的img标签的src属性发送请求并下载图片。...因此，通过html5自定义属性data-xxx先暂存src的值，然后在需要显示的时候，再将data-xxx的值重新赋值到img的src属性即可。...可以看出，10张图片是一次性全部加载完的。下面改造成懒加载：首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-src属性中。...当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片判断是否出现在视口内，如果出现在视口内，则将data-src赋值到src。...思路：当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断滚动条是否滚动到最底部，如果是，则将将图片的 src 属性设置为data-src的值。

3K2 0

jQuery进阶，$.Deferred() 延迟对象

$.getJSON().done(function(){ alert('成功'); }) jQuery的$.ajax()本身就支持Deferred，它可以链式补上 .done() .fail() 等方法来处理不同状态的结果...('load', function(){ alert($(this).width()); }) $img.attr('src', 'https://www.google.com/images.../srpr/logo11w.png'); return $img.width(); } 当调用 getImgWidth() 的时候，其返回值没法获取到正确的宽度，而随后当图片加载完成触发load...'); $img.on('load', function(){ dfd.resolve($(this).width()); }) $img.attr('src', 'https...deferred.reject() 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为”已失败”，从而立即触发fail()方法。

1K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

springboot2实现图片文件上传与mysql存储路径并回显

id="img-avatar" src=".....").attr("src",avatar); }); //监听注册按钮是否被点击,被点击则执行一个方法 $("#btn-changeAvatar").click(function () {...//发送ajax()的异步请求来完成用户的登入功能 $.ajax({ url: "/boot/users/changeAvatar", type: "POST"...img标签上的path地址 //attr(属性，属性值)：给某个属性设置某个值 $("#img-avatar").attr("src",json.data...dir.exists()){ dir.mkdirs();//创建当前的目录 } //获取文件名称,UUID工具生成新的字符串作为文件名 String originalFilename

1.2K0 1

springMVC实现文件图片的上传下载功能详解（源码已提供，小白必看）(一)

我们在做项目的时候，有时候遇见要实现Word文件，图片实现上传和下载，springmvc给我们提供了很好的方法，以下将从前端到后端进行详解，附带源码和实现效果 [1] 上传的前台实现如何在页面中显示一个按钮...，用户可以点击该按钮后选择本地要上传的文件在页面中使用input标签，type值设置为”file”即可确定上传请求的发送方式上传成功后的响应结果在当前页面显示，使用ajax请求来完成资源的发送上传请求的请求数据及其数据格式...请求数据: 上传的文件本身普通数据:用户名，Id，密码等，建议上传功能中不携带除上传资源以外的数据数据格式: 传统的请求中，请求数据是以键值对的格式来发送给后台服务器的，但是在上传请求中，没有任何一个键可以描述上次的数据...').val(obj.url); $('#myImg').attr("src","upload/"+obj.url).css("display",..." id="img" value="" > img src="" alt="" id="myImg" width="100px" style="display

2.5K3 0

Java数据采集-6.获取开源中国新闻列表（翻页-2）

/geekfly/get_list/OSCHINA_NEWS.java 1.打开目标网址，打开开发者工具，清空控制台 2.拖动滚动条到底部在一堆请求中，我们可以看到有一个xhr的请求，地址如...get_more_news_list,那它肯定就是翻页加载数据的Url请求了。...（可点击xhr进行过滤Url请求，xhr即为Ajax类型的请求。）...[class=avatar]").attr("src"); //String author_image = item.select("img").first().attr("src...使用循环获取每一页的数据，由于此类型的网站并不知道总页数，所以一般需要根据看是否还能获取到数据来判断结束。

7871 0

PHP的文件上传操作

src="" alt="需要上传的图片" id="face-img"> 中enctype="multipart/form-data"的意思，是设置表单的MIME编码。...第二个参数就是包含有路径的新的文件名。...具体代码如下： echo json_encode($arr); // 返回JSON数据，里面有文件的路径使用DOM操作设置预览图的路径具体代码如下： $("#face-img").attr("src...src="" alt="需要上传的图片" id="face-img"> <!

6.2K5 0

前后端分离跨服务器文件上传-Java SpringMVC版

; //将裁剪的图片加载到face_image $('#face_image').attr('src', canVas.toDataURL());...').attr('src', res.realPathList[0]); //真实完整路径 $('#img_path').val(res.relaPathList[0])...').attr('src', res.realPathList[0]); //真实完整路径 $('#img_path').val(res.relaPathList[0])...return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight...uploadProgress事件：上传过程中触发，携带上传进度。

5.7K8 0

前端开发者都应知道的 jQuery 小技巧

在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器 Ajax 调用的错误处理链式操作回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法...(var i = 0; i < arguments.length; i++) { $('img>').attr('src', arguments[i]); } }; $.preloadImages...这段简单的代码可以帮上大忙： $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你没有任何损坏的链接...$('input[type="submit"]').prop('disabled', false); 停止链接加载有时你不想链接跳转到某个页面或重加载该页面，而希望可以做一些其他事情.../窗口打开站外链接在一个新标签或者新窗口中打开外置链接，并确保站内链接会在相同的标签或窗口中打开： $('a[href^="http"]').attr('target', '_blank'

3.5K3 0

【前端基础篇】JavaScript之jQuery介绍

) minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐) slim: 精简瘦⾝版, 没有Ajax和⼀些特效 slim minified : slim 的压缩版开发时, 建议把...也可以从其他CDN上下载引⽤JQuery ⽐如： src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">List item 2 List item 3 img src="pic/rose.jpg"> $(function...这对于更新包含HTML标签的内容非常有用。...alert("动画完成"); }); // 此代码将使 #elementId 渐渐变透明，同时向右移动50px，并在5秒内切换高度 ajax(): 用于进行异步HTTP请求，可以加载数据而无需重新加载页面

3.4K1 0

浏览器跨域问题.

同源策略首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。...script标签的跨域能力不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供： src="http://ajax.aspnetcdn.com...实践： functionCreateScript(src){ $("").attr("src", src).appendTo("body") } 添加一个按钮事件来测试一下...由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定...利用jQuery获取jsonp 上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp： $("#getJsonpByJquery

1.6K19 0

jQuery基础图文系列

： jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。...append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合中的每个元素 attr() 设置或返回匹配元素的属性和值 before() 在每个匹配的元素之前插入内容...$("img").length;//返回图片标签的个数设置或返回被选元素的属性值。...$("img").attr("src","test.jpg");//设置图片src属性为test.jpg $("img").attr("src");//返回图片的src属性从每一个匹配的元素中删除一个属性...;//设置所有 p 元素的文本内容向每个匹配的元素内部追加内容。 $("p").append("Hello");//向所有P标签中追加一些HTML标记从DOM中删除所有匹配的元素。

5.3K1 0

ajax使用案例

后面需要对服务器给我们返回的数据进行操作，那么我们就取4中的数据用变量的形式放到ajax创建的html标签中。这样前端访问到这个页面时就要从后端获取来的数据进行渲染的网页了。...({}) }) 记得外面的(function{})是加载完文档才执行内部代码，防止文档没加载完，js操作没加载的标签的事情。...而想要实现ajax的请求是放在.ajax({})里面的。ajax是jQuery的方法，需要导入jQuery库文件。刚才犯了个错误，没有放到下面就是代码执行后获取到的这个api的数据对象。...//疑问，{}引用变量只是反引号中引的吗？后面再使用attr添加属性也是可以的。...$(父选择器).on(‘事件’，‘标签’，匿名函数) //错选择的是li而不是ul标签。

12.3K2 0

用JS压缩上传的图片

图片压缩的原理：将图片重新画入到canvas画布里面，再将canvas转成图片的形式。...图片压缩js代码： function compressedImg(path, callback) { var img = new Image(); img.src = path;...标签 $('#showImg').attr("src", replaceSrc); }; reader.readAsDataURL(file.files...var base64 = canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值...= $("#showImg").attr("src"); if (img) { var blob = dataURLtoBlob(img); fd.append

40.2K2 0

这是我见过最牛逼的滑动加载框架

} }); 上拉加载时，除了callback属性回调外，还有其他常用的配置，如：加载页码配置：page: { num : 0 ,size : 10 ,time : null}, 无数据的布局：...处理回调（刷新和加载） : //下拉刷新的回调 function downCallback() { // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext...默认false attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): img imgurl='网络图 src='占位图''/>...} }) 设置img或div的 imgurl 属性, 值为图片的网络地址 img标签: img imgurl="网络图" src="占位图"/> // 占位图直接在src设置; 图片加载成功...,就会替换src的占位图 div或其他标签: // 占位图在css中设置; 图片以背景图的形式展示

2.4K3 0

jQuery 教程

： jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。...如果 load() 方法已成功，则显示”外部内容加载成功！”，而如果失败，则显示错误消息： <!...function(html) { $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签 })...“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。...> jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

21.1K2 0

一些好用的jquery技巧

arguments.length; i++) { $('img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover-on.png...', 'img/hover-off.png'); 3、检查图像是否加载有时为了继续脚本，你可能需要检查图像是否全部加载完毕： $('img').load(function () { console.log...('image load successful'); }); 你也可以用ID或类替换img>标签来检查某个特定的图像是否被加载。...$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); }...，也不想要重新加载页面——你可能希望链接做点别的事情，例如说触发一些其他脚本。

5.6K6 0

jquery上传图片并回显

在工作中，有时候我们会遇到这样的情况：上传图片并回显。先来看看代码怎么写。然后咱们在讨论，这个案例中使用到的技术。页面是用的是thymeleaf开发的。...不用生成年月日的*****/ /** * 上传到指定目录中。 ...* 如excel中的img保存路径：D:/ruoyi/uploadPath/pic/imgs * @param imgFilePath * @param file * @return...二：使用到了jQuery的赋值方法 2.1：给input标签的value赋值 $("#productImgValue").val(res.url); 2.2：给img标签的src赋值 $("#showImgId...").attr('src',res.url); 三：通过jQuery控制元素显示与隐藏 3.1：显示 $("#showImgId").show(); 3.2：隐藏 $("#container").hide

5.4K1 0

第113天：Ajax跨域请求解决方法

所以可以使用script标签的src属性请求后台数据 1 src="http://127.0.0.1/json.php" type="text/javascript" charset=..."utf-8"> ② 由于src在加载数据成功后，后直接将加载内容放入到script标签中所以，后台直接返回JSON字符串将不能在script标签中解析因此，后台应该返回给前台一个回到函数名...，并将JSON字符串作为参数传入后台PHP文件中返回： echo "callBack({$str})"; ③ 前台接收到返回的回到函数，将直接在script标签中调用。...若要跨域请求出于安全性考虑是不行的，但是我们发现，Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如、img>、，这时候...方法采用jQuery的ajax方法调用后端的Web服务GetSingleInfo方法，后台的GetSingleInfo方法，使用前端的回调方法OnGetMemberSuccessByjsonp包装后台的业务操作的

2K1 0

一个小时学会jQuery

而jQuery方法与CSS相同，指定需要操作的标签名即可操控所有的标签。...'之间所有的父级节点,掐头去尾 $("div").siblings() //所有的同辈节点,不包括自己 4.6、属性操作 $("img").attr("src"); 　　　　　　 //返回文档中所有图像的...src属性值 $("img").attr("src","node.jpg"); //设置所有图像的src属性 $("img").removeAttr("src"); 　　　//将文档中图像的src属性删除..., function(data){ $.each(data.items, function(i,item){ $("img/>").attr("src", item.media.m)...(因为将使用DOM的script标签来加载) "json": 返回 JSON 数据。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?"

22.4K7 1

jsoup详解

同源策略首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。...script标签的跨域能力不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供： src="http://ajax.aspnetcdn.com...实践： function CreateScript(src) { $("").attr("src", src).appendTo("body") } 添加一个按钮事件来测试一下...由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定...利用jQuery获取jsonp 上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp： $("#getJsonpByJquery

2K9 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭