美文网首页
js-事件委托&图片预加载

js-事件委托&图片预加载

作者: 萝卜缨女王 | 来源:发表于2020-10-13 09:19 被阅读0次

事件委托

$(function (){
    var oUl=document.getElementById('ul1');
    oUl.onclick=function (ev){
        var oEvent=ev || event;
        var oSrc=oEvent.srcElement || oEvent.target;
        if (oSrc.tagName == 'LI')
        {
            oSrc.style.background='red';
        }
    };
});
window.navigator.userAgent.indexOf('MSIE 6.0') != -1

图片预加载

window.onload=window.onscroll=window.onresize=function (){
    var aImg=document.getElementsByTagName('img');
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var clientHeight=document.documentElement.clientHeight;
    var clientBottom=clientHeight+scrollTop;
    for (var i=0; i<aImg.length; i++)
    {
        if (aImg[i].offsetTop <= clientBottom)
        {
            // 在可视区内
            var _src=aImg[i].getAttribute('_src');
            aImg[i].src=_src;
        }
    }
};

吸顶条

window.onload=function (){
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var top=oDiv.offsetTop;
    window.onscroll=function (){
        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        if (top <= scrollTop)
        {
            // 吸顶
            oDiv.style.position='fixed';
            oDiv2.style.display='block';
        }
        else
        {
            // 不吸
            oDiv.style.position='';
            oDiv2.style.display='none';
        }
    };
};

图片预加载

window.onload=function (){
    var oDiv=document.getElementById('div1');
    var oSpan=document.getElementById('span1');
    var total=77; // 总数
    var n=0; // 当前加在张数
    for (var i=0; i<total; i++)
    {
        var oImg=new Image();
        oImg.src='[http://www.zhinengshe.com/works/3525/img/](http://www.zhinengshe.com/works/3525/img/)'+i+'.jpg';
        oImg.onload=function (){
            n++;
            // 0 - 1
            var scale=n/total*100;
            oSpan.innerHTML=Math.floor(scale)+'%';
            oDiv.style.width=scale+'%';
        };
    }
};
 // [http://www.zhinengshe.com/works/3525/img/0.jpg](http://www.zhinengshe.com/works/3525/img/0.jpg)
 // 76

相关文章

  • js-事件委托&图片预加载

    事件委托 图片预加载 吸顶条 图片预加载

  • 图片预加载

    背景 利用图片的预加载技术获得更好的用户体验 什么是有序预加载和无序预加载 jQuery插件的写法 图片预加载,预...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 前端图片加载优化

    预加载 图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要 css预加载 利用css的bac...

  • 【JS】图片预加载--无序加载网站loading

    课程前言: 慕课网 --图片预加载 图片预加载的特点: ( 1、网站的Loading页 2、局部图片的加载--表情...

  • JavaScript--预加载与延迟加载

    JavaScript--预加载与延迟加载 1. 预加载:就是页面打开,图片什么的都加载好了(优先显示图片) 2. ...

  • 图片的预加载与懒加载

    图片预加载与懒加载 由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),...

  • 2018-07-27

    JS实现图片预加载

  • 图片预加载、瀑布流+图片预加载

    图片预加载 图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示,但为了提高网页的完整性,给未能...

网友评论

      本文标题:js-事件委托&图片预加载

      本文链接:https://www.haomeiwen.com/subject/ibeluktx.html