美文网首页
图片的预加载和延时加载

图片的预加载和延时加载

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:16 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片预加载和延时加载</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div class="imgDiv">点我加载图片</div>
        <div class="delay">
            <img src=""/>
            <div>点我开始加载图片</div>
        </div>
    </body>
    <script type="text/javascript">
    //图片的预加载。利用src属性的特性,可以在插入图片之前,先给图片赋值src属性,这样会让图片先去请求,等到使用的时候,图片已经加载完毕,可以直接使用
    //图片的src属性,图片只有在赋值src之后,才会开始加载图片
        var img=document.createElement('img');
            img.src="AKL.jpg";
            img.onload=function  () {
                console.log("图片加载完毕了");
            }
        var imgDiv=document.querySelector(".imgDiv");
        
        imgDiv.onclick= function  () {
            
            imgDiv.appendChild(img);
        }
        
        //延时加载  不给img设置src属性,当需要展示这张图片的时候才去设置。
        var delayDiv=document.querySelector(".delay");
        delayDiv.onclick = function () {
            document.querySelector(".delay img").src = "AKL.jpg";
        }
    </script>
</html>

相关文章

  • 图片的预加载和延时加载

  • 图片预加载

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

  • 前端图片加载优化

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

  • JS

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

  • 图片懒加载

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

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

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

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

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

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

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

  • 懒加载和预加载

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

  • 图片的预加载与懒加载

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

网友评论

      本文标题:图片的预加载和延时加载

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