js通过添加随机数的方法,解决多张图片加载时由于缓存导致图片无法正确显示的问题

问题出现描述:当对列表中某个图片进行重新编辑时,提交后会发现图片列表仍会出现修改之前的图片,新图片并未覆盖。

问题出现原因:缓存问题。

解决办法:通过js方法,在每张图片路劲后面添加一个随机数,这样每次加载就会重新提交数据,避免因数据相同直接从缓存中取数据。

代码展示:

html部分,<img src=‘01.jpg‘ class=‘img‘ />

js部分,

<script type="text/javascript">

  $(function(){

    var string = ‘‘;

    for(var i = 0; i < 5; i++)

    {

      string += Math.floor(Math.random() * 10)

    }

    $(‘.img‘).each(function(){

      this.src = this.src + ‘?‘ + string;

    });

  });

</script>

时间: 2024-10-13 09:38:05

js通过添加随机数的方法,解决多张图片加载时由于缓存导致图片无法正确显示的问题的相关文章

vue超简单加载字体方法,解决scss难加载字体的问题

vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后,scss设置的字体依旧可以正确识别,注意style的lang不要写,就使用原生css 示例引入 <style> @font-face{ font-family: pingfang; src: url('./style/pingfang.ttf') } </style> 然后想要的位置

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

JSFF或JSF页面加载时触发JavaScript之方法

现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生成这些页面元素的JS脚本放到JSFF时就会发现,JS脚本只在我们进入TaskFlow的第一个View被执行了,进入后续View时,后续View的JS代码加载和执行. 分析 通过分析,发现当进入TaskFlow的第一个View时,第一个View中通过<af:resource/>标签引入的JS代码能成

jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head > 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>验证加载顺序</title> 5 <s

jQuery_review 之 通过.load()方法来实现异步加载HTML文档

原生的ajax编写起来是相当麻烦的一件事情,我们不仅仅要处理不同浏览器下的XMLHttpRequest对象不同的初始化,还需要识记大量的XMLHttpRequest对象的属性和方法,而且做的很多都是重复性的工作,就如同jdbc的实现方式是一样的,JDBC有很多固定的模式,所以不管是Hibernate还是Ibatis亦或是Spring都使用模板模式来封装了大量相同的调用,让整个方法变得更加容易使用.对于程序员来说,这些都是一些非常好的事情,因为再也不用重复造轮子了,重复造轮子,成本高,性能也未必与

jQuery_review之通过$.get()和$.post()方法来实现异步加载

$.get()和$.post()这两个方法,顾名思义,一个就是通过get方法来获取数据,另外一个通过post方法来获取数据.这两个方法在具体有什么区别呢?重点有三个方面的区别,第一个get传送的数据理论在2KB之内,post方法原则上是不受限制的.第二个方面,一个在地址栏上会显示当前的请求内容,这种在有用户名和密码的时候就不好了.另外一个是在请求体当中,这个虽然也不是很安全,但是至少要比GET方法要安全那么一点点了.第三个,其实get方法最初是用来设计请求静态内容的,而POST则是用来提交增删改

使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据

<div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == 0}fwbold{/if}"><a href="portal.php?mod=merchant&action=voucherlist&int=0">全部订单</a><em class="pos-abs">

js 多张图片加载 环形进度条

css 部分使用 svg 绘制环形 1 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; display: block;} 2 svg circle{fill:none;cx:50;cy:50;} 3 /* svg text{x:40;y:55;} 不起作用 原因不知*/ 4 svg #txt{ x:35;y:55%;fill:red;} 5 svg #backdrop{stroke-linec

SpringMVC解决视图懒加载问题

在web.xml文件中加入相关的过滤器即可 <!-- 解决视图懒加载 --> <!-- org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter --> <filter> <filter-name>oemiv</filter-name> <filter-class>org.springframework.orm.jpa.support.OpenEntityMan