js图片延迟技术

最新推荐文章于 2021-12-29 23:30:00 发布

binglinglong2

最新推荐文章于 2021-12-29 23:30:00 发布

阅读量880

点赞数

分类专栏： js 图片延迟文章标签： js 图片

本文链接：https://blog.csdn.net/binglinglong2/article/details/21598613

版权

图片延迟技术一般的思路

1.现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中（以便进行src替换）。

2.获取卷轴的高度和窗口的高度

3循环需要延迟加载的img数组，获取img的高度，判断该元素是否在可视窗口内。若该元素在可视窗口内，则进行src替换

一下为测试代码

html

<style>
.wrap {
    margin: 20px auto;
    width: 150px;
}
.wrap div {
    border: 1px dotted #E29808;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    text-align: center;
    width: 150px;
}
.wrap .sortable {
    background-color: #E6D6AB;
    border: 1px solid #E29808;
}
#showImg li{
width:30%;
margin-left:2%;
margin-top:15px;
height:300px;
float:left;
background:#CCC;
}
#showImg li:nth-child(3n){
margin-left:3%;
}
#showImg li img{
width:100%;
max-height:100%;
}
</style> 
</head>


<body>
<div id="showImg">
    <li><img src="http://img4.duitang.com/uploads/item/201306/08/20130608190125_3kFty.jpeg" alt="test

最低0.47元/天解锁文章

binglinglong2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片延迟技术

图片延迟技术一般的思路1.现将img元素对应的src路径设置为背景图片，而该img所对应的url路径存放在一个自设的属性中（以便进行src替换）。2.获取卷轴的高度和窗口的高度3循环需要延迟加载的img数组，获取img的高度，判断该元素是否在可视窗口内。若该元素在可视窗口内，则进行src替换一下为测试代码html.wrap { margin: 20px aut
复制链接

扫一扫

专栏目录