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

利用 img src 属性发起 get 请求踩坑记录

一、背景 工作中,碰到一个需求,需要使用img标签src属性发送一个get请求。原先设想是,当请求发送成功之后,会触发imgonload回调,请求失败,则触发imgonerror回调。...编写测试demo 首先写一个demo,利用js动态创建一个img标签,然后将接口地址赋值给src属性,发起请求,同时,设置好onload和onerror回调函数。 <!...而当你把src属性值换成一个正常图片地址后,onload就能正常触发。 3....但是不甘心呀,于是网上查阅资料,发现还HTMLImageElement上还有一个叫complete只读属性,它是一个布尔值,表示图片是否完全加载完成。...在看到定义里面表示图片是否完全加载完成时候,心凉了一截,怕是这个也没办法达到我要求,但还是抱着试一试想法测试了一下,于是在原先代码里,添加了complete属性: <!

4.1K00
您找到你想要的搜索结果了吗?
是的
没有找到

HTML 里 img 元素 src 和 srcset 属性有何区别?

在 HTML 中,img 元素通常用于在网页中插入图片。img 元素有两个相关属性src 和 srcset。 src 属性指定图像 URL,它是必需。...在使用 srcset 属性时,可以选择一个默认图像文件,将其 URL 放在 img 元素 src 属性中。如果浏览器不支持 srcset 属性或无法选择最合适图像,则将加载默认图像文件。...总的来说,src 属性用于指定图像 URL,而 srcset 属性用于指定一系列不同大小或分辨率图像文件,以便浏览器可以选择最合适图像来适应不同设备和屏幕大小。 下面是一个具体例子。...src NmOQ 是默认值,类型为 zoom: 在现代浏览器中,当浏览器遇到一个带有 srcset 属性 img 标签时,它将根据以下步骤来渲染图片: 首先,浏览器会根据 devicePixelRatio...最后,浏览器将选中图片资源 URL 赋给 img 元素 src 属性,然后加载并显示该图片。

3.4K10

PHP 正则表达式 获取富文本中 img标签src属性

前言 鄙人发现对于微信看看中文章,一般都会有三张摘要图片; 所以想着可以直接提取富文本中 标签 src 属性信息; 这样就可以在前台 文章列表中展示三张图片(建议不要多了),吸引阅读... 标签是忽略大小写,并且 标签结尾 使用 > 或者 /> - 2. src 属性信息一般是以".jpg|.png|.jpeg|.gif"结尾; 但是也有的不需要扩展没那个结尾(只是个图片链接...注意匹配结尾形式 ([^\'\"]*) 匹配不上单引号和双引号字符 整理后处理源码如下: /** * 对富文本信息中数据 * 匹配出所有的 标签 src属性 * @param...标签中 src属性信息 $pattern_src = '/\bsrc\b\s*=\s*[\'\"]?...参考文章 ------ 如何通过正则表达式获取img标签src属性 ------ PHP正则表达式,看这一篇就够啦! ②. 推荐学习—— 正则表达式 - 匹配规则

6.6K10

img标签src=会引起Page_Load多次执行

今天看见园子里有人因imgsrc为空导致session丢失,详情见http://www.cnblogs.com/kyneblog/archive/2009/06/11/1500999.html 以前一直没注意这个... alt="test" src="" /> F5运行,发现log.txt确实有二行记录(在IE,FF,Chrome下都是同样结果) 如果把   改成二个连续img,即:       运行后,页面仍被执行2次 继续测试...(呵呵,看来多一事不如少一事) 最后再折腾一次,把src故意写成一个错误地址,比如<img alt="test" src="http://abc.asdf.werdafsaf.sadfasdfas.xxx.gif...结论:img标签src=""时,会引起浏览器再次访问"./"即当前目录,如果该目录下有default.aspx,index.aspx等IIS默认文档,则默认文档会执行2次

1.3K100

关于前端开发中 img 元素 srcset 属性

img 标签 srcset 属性是一种用于响应式网页设计属性,它允许开发者为图像提供不同大小和分辨率版本,以便根据设备屏幕大小和像素密度自动选择最合适图像进行显示。...一个基本 srcset 属性语法如下: <img src="default-image.jpg" srcset="image1.jpg 1x, image2.jpg 2x, image3.jpg 3x...以下是一个使用 srcset 属性例子: <img src="thumbnail.jpg" srcset="thumbnail-1x.jpg 1x, thumbnail...src 属性是一个后备(fallback)选项,用于那些不支持 srcset 属性旧浏览器。 除了宽度描述符,srcset 还支持像素密度描述符,表示每个 CSS 像素对应物理像素数。...例如: <img srcset="example-standard.jpg 1x, example-highres.jpg 2x" src="example-standard.jpg"

39840

img标签中srcset属性有什么用?

img元素srcset属性用于浏览器根据宽、高和像素密度来加载相应图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。 当然,仅限于图片,也就是img标签。...属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。 像这样就可以表示浏览器宽度达到800px则加载middle.jpg达到1400px则加载big.jpg。...img元素 size 属性给浏览器提供一个预估图片显示宽度。 同时,css属性image-set()支持根据用户分辨率适配图像。  .../images/pic-3.jpg) 600dpi);  } 上述代码将会为普通屏幕使用pic-1.jpg,为高分屏使用pic-2.jpg如果更高分辨率则使用pic-3.jpg,比如印刷。

2.2K20

vue页面开发遇到坑,都是泪!src属性,freemarker取值

一开始计划直接将数据写成json格式数据放到js文件,由于数据不固定还有不容易统一,还需要随机出题 索性将输入导入数据库,后台传入返回json得了。...因为你数据是vue里面的,而你src是不能直接引入,需要加:src   :是v-bind缩写 里面src值默认是有{{}},所以是不需要加{{}},但是面临问题是路径是需要拼接,这个时候需要使用单引号...vue里面定义。到时候也是可以直接调用。 功能是实现了,又有个问题,'并发问题',问了下边上搞安卓端,怎么给JavaScript枷锁 我他妈这想法也是绝了,之后人家直接给我说,js是单线程。...="btn_test"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js

1.6K30

vue页面开发遇到坑,都是泪!src属性,freemarker取值

一开始计划直接将数据写成json格式数据放到js文件,由于数据不固定还有不容易统一,还需要随机出题 索性将输入导入数据库,后台传入返回json得了。...因为你数据是vue里面的,而你src是不能直接引入,需要加:src   :是v-bind缩写 里面src值默认是有{{}},所以是不需要加{{}},但是面临问题是路径是需要拼接,这个时候需要使用单引号...vue里面定义。到时候也是可以直接调用。 功能是实现了,又有个问题,'并发问题',问了下边上搞安卓端,怎么给JavaScript枷锁 我他妈这想法也是绝了,之后人家直接给我说,js是单线程。...="btn_test"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js

98720
领券