cheft/image.html

## image.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>大图片加载方案</title>
  <style>
  html,
  body {
    margin: 0;
    padding: 0;
  }

  .placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }

  .placeholder img {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;
  }

  .placeholder img.loaded {
    opacity: 1;
  }

  .img-small {
    filter: blur(50px);
  }
  </style>
</head>

<body>
  <div class="placeholder" data-large="bg.jpg">
    <img src="bg-small.jpg" class="img-small">
    <div style="padding-bottom: 62.6%;"></div>
  </div>
  <script>
  window.onload = function() {

    var placeholder = document.querySelector('.placeholder'),
      small = placeholder.querySelector('.img-small')

    // 1: load small image and show it
    var img = new Image();
    img.src = small.src;
    img.onload = function() {
      small.classList.add('loaded');
    };

    // 2: load large image
    var imgLarge = new Image();
    imgLarge.src = placeholder.dataset.large;
    imgLarge.onload = function() {
      imgLarge.classList.add('loaded');
    };
    placeholder.appendChild(imgLarge);
  }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>大图片加载方案</title>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}

	.placeholder {
	background-color: #f6f6f6;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	}

	.placeholder img {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 1s linear;
	}

	.placeholder img.loaded {
	opacity: 1;
	}

	.img-small {
	filter: blur(50px);
	}
	</style>
	</head>

	<body>
	<div class="placeholder" data-large="bg.jpg">
	<img src="bg-small.jpg" class="img-small">
	<div style="padding-bottom: 62.6%;"></div>
	</div>
	<script>
	window.onload = function() {

	var placeholder = document.querySelector('.placeholder'),
	small = placeholder.querySelector('.img-small')

	// 1: load small image and show it
	var img = new Image();
	img.src = small.src;
	img.onload = function() {
	small.classList.add('loaded');
	};

	// 2: load large image
	var imgLarge = new Image();
	imgLarge.src = placeholder.dataset.large;
	imgLarge.onload = function() {
	imgLarge.classList.add('loaded');
	};
	placeholder.appendChild(imgLarge);
	}
	</script>
	</body>

	</html>