在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示。
其实图片懒加载的核心思想很简单:
setTimeout({
$imgs.each(function () {
var $img = $(this);
$img.src = $img.attr('data-src');
});
}, 0);
// 设置 500ms 防抖动,避免回调频繁执行,影响性能
$(window).on('scroll', _.debounce(function () {
var $window = $(window);
var top = parseInt($window.height()) + parseInt($window.scrollTop());
$imgs.each(function () {
var $img = $(this);
var oSrc = $img.attr('data-src');
if (!oSrc) return;
if ($img.offset().top < top) {
$img.src = oSrc;
$img.attr('data-src', '');
}
}, 500));
有些时候,由于网络请求或是资源问题,导致图片资源请求失败,这时图片会展示为非常难看的效果(破碎的图片)。这时可以通过监听图片的 onerror 时间来处理。
$img.onerror = function () {
$img.src = 'default.jpg';
}
为了避免默认图片也加载失败时,图片资源无限执行的情况,可以利用 jquery 的 one() api 接口绑定一个一次性的 onerror 事件。
$img.one('error', function () {
$img.src = 'default.jpg';
});
tip: 在加载图片时,我们可以利用创建一个不在 渲染树 中的 Img 元素来加载图片资源。
var oSrc = $img.attr('data-src');
var img = document.createElement('img');
img.onload = function () {
$img.src = oSrc;
};
img.onerror = function () {
console.debug('图片加载失败:', img.src);
// 此时 $img src 依然为默认图,如果图片是否替换判断不为 data-src ,可不进行清空
$img.attr('data-src', '');
};
img.src = oSrc;
大多数的时候,图片所处位置的宽高都是固定的。但是图片实际的宽高都是未知的,图片宽高的设置方式有:
background-size: cover; 能够对图片最大程度的利用,不存在留白和图片失真的问题。不过该方式会存在图片资源的损失(图片不能完全展示)。
.img {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
export default function (el, binding) {
setTimeout(() => {
const img = document.createElement('img');
img.onload = function () {
el.style.backgroundImage = `url(${binding.value})`;
};
img.onerror = function () {
console.debug('图片加载失败:', img.src);
};
img.src = binding.value;
}, 0);
};
完整示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>图片懒加载处理</title>
<style>
.img-group {
display: flex;
width: 800px;
flex-wrap: wrap;
list-style-type: none;
}
.img-item {
flex: 0 0 33.3%;
height: 100px;
background-color: aquamarine;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img-item:nth-child(odd) {
background-color: chocolate;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="tpl">
<ul class="img-group">
<li class="img-item" v-for="img in imgs" v-img=" img"></li>
</ul>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
template: '#tpl',
data() {
return {
imgs: [
'http://inews.gtimg.com/newsapp_match/0/9167593089/0',
'http://inews.gtimg.com/newsapp_match/0/9167593090/0',
'http://inews.gtimg.com/newsapp_match/0/9167593092/0',
'http://inews.gtimg.com/newsapp_match/0/9167593093/0',
'http://inews.gtimg.com/newsapp_match/0/9167593095/0',
'http://inews.gtimg.com/newsapp_match/0/9167595616/0',
'http://inews.gtimg.com/newsapp_match/0/9167595617/0',
'http://inews.gtimg.com/newsapp_match/0/9167595618/0',
'http://inews.gtimg.com/newsapp_match/0/9167595619/0'
],
};
},
directives: {
img(el, binding) {
setTimeout(() => {
const img = document.createElement('img');
img.onload = function() {
el.style.backgroundImage = `url(${binding.value})`;
};
img.onerror = function() {
console.debug('图片加载失败:', img.src);
};
img.src = binding.value;
}, 0);
},
},
});
</script>
</body>
</html>
如果是前端资源图片的话,还可以做图片做一些其他优化:
具体细节说明可以参考: web前端优化之图片优化
原文来自:https://segmentfault.com/a/1190000019377624
Javascript 引擎是单线程的,因此一旦遇到异常,Javascript 引擎通常会停止执行,阻塞后续代码并抛出一个异常信息,因此对于可预见的异常,我们应该捕捉并正确展示给用户或开发者。
JavaScript和其他语言一样,都拥有捕获异常的机制。js中异常捕获的语句同样分为了三部分:try用于捕获异常,catch用于处理异常,finally用于关闭资源等后续操作。
使用Nodejs的request批量请求某一个接口,由于接口超时,出现 ESOCKETTIMEDOUT,程序中断,为了让程序遇到 ESOCKETTIMEDOUT 之后能够继续执行下去,需要对 request 部分加上 try...catch
错误,指程序中的非正常运行状态,在其它编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描迹信息。
Promise创建时需要传入一个function,在这个function执行过程中,如果出现了异常则会对外抛出。外部有2种方式来捕获这个异常:
为了保证健壮性,我们要对所有可能报错的代码添加异常处理,但是每个方法都添加 try catch 又太麻烦,所以我们利用 Proxy 实现了代理,透明的给对象的所有方法都添加上了异常处理。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!