图片重载

来源：互联网发布：python数据分析怎么样编辑：程序博客网时间：2024/05/21 11:03

图片加载失败显示默认图片

使用onerror事件

$('img').error(function(){    $(this).attr('src', "default.jpg(默认图片的url地址)");});

图片加载失败自动重试，重试失败显示默认图片

<body><img id="img"  src="clock60.png"  retry="0" ><script>$(function() {    $('#img').on('error', function() {        var retry= $('#img').attr("retry");        if (retry > 0) {            $('#img').attr('src', 'https://iustudio.science/images/srpr/logo11w.png');        } else {            retry++;            $('#img').attr("retry", retry);            $('#img').attr('src', $('#img').attr('src'));        }    });})   </script></body>

图片加载失败点击重试

<body>    <img id="test" src="dist/img/contact/QRCod1e.jpg" data-loaded="true"></body?<script>//  图片图片是否加载成功，加载成功图片的data-loaded属性设置为true$(function(){  $('img').error(function(){    $(this).attr('data-loaded', 'false')  }).click(function(){    if($(this).attr('data-loaded') === 'false'){    //      增加随机数让浏览器不从缓存读取图片      var src = 'dist/img/contact/QRCode.jpg?t=' + Math.random();      $(this).attr('src', src )    }  }).load(function(){//如果加载成功重置图片状态    $(this).attr('data-loaded', 'true')  })})</script>

阅读全文

0 0