前端开发图片的延时加载实现方法

web前端开发技术教材
web前端技术开发视频
web前端开发技术教学大纲

首先,先介绍一下关于javascript中dataset属性。。
html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放。
下面是元素应用data属性的一个例子:
~~~~~~~~~~~~~~~~·
<div id=”day-meal-expense” data-drink=”tea” data-food=”noodle” data-meal=”lunch”>$18.3</div>
要想获取某个属性的值,可以像下面这样使用dataset对象:
var expenseday=document.getElementById(‘day-meal-expense’);
var typeOfDrink=expenseday.dataset.drink;
console.log(typeOfDrink);//tea
console.log(expenseday.dataset.food);//noodle
console.log(expenseday.dataset.meal);//lunch

如果浏览器支持dataset,则会弹出注释内容,如果浏览器不支持dataset则会报错,无法获取属性drink/food/meal的值:对象为null或未定义(如IE9版本).<br />
data属性基本上所有的浏览器都是支持的,但是dataset对象支持的就比较特殊了,目前仅在Opera 11.1+,Chrome
9+下可以通过javascript,使用dataset访问你自定义的data属性.至于其他浏览器,FireFox 6+(未出)以及Safari 6+(未出)会支持dataset对象,至于IE浏览器,目前看来还是遥遥无期的趋势.

问:不是有getAttribute来获取自定义属性么。要这个干嘛??
答:如果使用传统的方法获取属性值应该会类似下面:
var typeOfDrink=document.getElementById(‘day-meal-expense’).getAttribute(‘data-drink’);
现在,如果我们要获得多个自定义的属性值,就要用下面N行代码来实现了:
var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
if(attrs[i].name.substring(0,5)==’data-‘){
expense[attrs[i].name.substring(5)]=attrs[i].value;
}
}
而使用dataset属性,我们根本不需要任何循环去获取你想要的那个值,直接秒杀:
expense=document.getElementById(‘day-meal-expense’).dataset;

问:怎么操作这玩意~
答:可以像下面这样操作名-值对:
charInput=[];
for(var item in expenseday){
charInput.push(expenseday[item]);
}
让所有的自定义属性塞到一个数组中.
如果你想删除一个data属性,可以这么做:
delete expenseday.dataset.meal;
console.log(expenseday.dataset.meal)//undefined
如果你想给元素添加一个属性,可以这么做:
expenseday.dataset.dessert=’icecream’;
console.log(expenseday.dataset.dessert);//icecream

dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象,DOMStringMap是HTML5一种新的含有多个名-值对的交互变量.

下面来个实际的应用吧~
(当然图片地址肯定是空的。想要看效果的自己去加个图片地址)
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>图片延迟加载</title>
        <style>
            #box {
                width: 100%;
                height: 500px;
            }
            #box img {
                width: 100%;
                height: 500px;
                transition: 1s;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id=”box”></div>
        <script type=”text/javascript”>
            var data = [‘img/1.jpg’, ‘img/2.jpg’, ‘img/3.jpg’, ‘img/4.jpg’]
            var box = document.getElementById(‘box’)
            // var img=document.createElement(img);
            for (var i = 0; i < data.length; i++) {
                var img = document.createElement(‘img’)
                img.dataset.src = data[i]
                // img.style.opacity=1;
                box.appendChild(img)
                // console.log(box);
            }
            var imgs = document.querySelectorAll(‘img’)
            window.addEventListener(‘scroll’, loadFn)
            window.addEventListener(‘load’, loadFn)
            function loadFn() {
                for (var i = 0; i < imgs.length; i++) {
                    if (
                        imgs[i].getBoundingClientRect().top < window.innerHeight
                    ) {
                        if (imgs[i].dataset.src) {
                            imgs[i].src = imgs[i].dataset.src
                            imgs[i].style.opacity = 1
                            imgs[i].removeAttribute(‘data-src’)
                        }
                    }
                }
            }
        </script>
    </body>
</html>
前端技术开发 英语怎么说
web前端开发技术分享
web前端开发需求技术
» 本文来自:前端开发者 » 《前端开发图片的延时加载实现方法》
» 本文链接地址:https://www.rokub.com/7871.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!