console
var eleButton = document.querySelector('button'),
eleImg = document.querySelector('img');
if (eleButton && eleImg) {
var initValueButton = eleButton.innerHTML;
var srcImage = eleImg.getAttribute('data-src');
console.log(srcImage);
eleImg.removeAttribute('data-src');
eleButton.addEventListener('click', function() {
if (this.innerHTML == initValueButton) {
this.innerHTML = '移除src属性';
eleImg.setAttribute('src', srcImage);
} else {
this.innerHTML = initValueButton;
eleImg.removeAttribute('src');
}
});
}
<img alt="一张图片" data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2259376396,2250852130&fm=27&gp=0.jpg"/>
<p><button>设置src属性显示图片</button></p>
img {
display: inline-block;
width: 256px; height: 192px;
color: transparent;
position: relative;
overflow: hidden;
}
img:not([src]) {
visibility: hidden;
}
img::before {
content: "";
position: absolute; left: 0;
width: 100%; height: 100%;
background-color: #f0f3f9;
visibility: visible;
}
img::after {
content: attr(alt);
position: absolute;
left: 0; bottom: 0;
width: 100%;
line-height: 30px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 14px;
transform: translateY(100%);
transition: transform .2s;
visibility: visible;
}
img:hover::after {
transform: translateY(0);
}