图片效果处理

图片显示为其自身的灰度版本
优化前端访问速度 图片懒加载

html图片

<!-- src规定显示图像的URL alt 规定图像无法显示时候替代的文本 -->
<img src="URL" alt="value" >

/*防止图片溢出盒子  */
img{
	max-width:100%;
}

灰色

img {
    -webkit-filter: grayscale(100%); 
    /* old safari */
    filter: grayscale(100%);
}

​ 2.filter-1977

-webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);

克拉伦登

filter: sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);

阿什比

webkit-filter: sepia(.5) contrast(1.2) saturate(1.8);

图片懒加载

原生懒加载

<img src="image.jpg" loading="lazy" alt="Sample image" />

基于 JavaScript 的方案

// 一开始没有滚动的时候，出现在视窗中的图片也会加载
start();

// 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
var clock; //函数节流
$(window).on('scroll', function() {
	if(clock) {
		clearTimeout(clock);
	}
	clock = setTimeout(function() {
		start()
	}, 200)
})

function start() {
	$('.container img').not('[data-isLoading]').each(function() {
		if(isShow($(this))) {
			loadImg($(this));
		}
	})
}

// 判断图片是否出现在视窗的函数
function isShow($node) {
	return $node.offset().top <= $(window).height() + $(window).scrollTop();
}

// 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
function loadImg($img) {
	$img.attr('src', $img.attr('data-src'));

	// 已经加载的图片，我给它设置一个属性，值为1，作为标识
	// 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
	$img.attr('data-isLoading', 1);
}