图片影响页面加载速度,可以先加载完页面,再去加载图片。

defer:告诉浏览器,这里面的js代码不影响网页脚本解析,可以解析完html脚本再执行这段js代码(个人理解)。

网页代码:<img src="grey.gif" data-original="img/53a1820f5866c.png"/>

Js代码:

<script defer="defer" type="text/javascript" >
      $(window).on("load",function(){
        var str=document.getElementsByTagName('img');
         for(var i=0;i<str.length;i++)//遍历内容块
            {
            str[i].setAttribute('src',str[i].getAttribute('data-original'));
            }
      });
</script>

网页图片很多时,加载完后再加载图片(defer:延迟加载)的更多相关文章

  1. .js控制一次加载一张图片,加载完后再加载下一张

    js怎么控制一次加载一张图片,加载完后再加载下一张 (1)方法1 (1)方法2

  2. jquery循环延迟加载,用于在图片加载完成后再加载js

    <html> <head> <script type="text/javascript" src="http://lib.sinaapp.c ...

  3. js 图片加载完后的处理事件

    //图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...

  4. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  5. iOS开发小技巧--textField成为密码框,view加载完后textField获取焦点

    文本框安全输入:Secure Text Entry(安全文本输入) view加载完后textField获取焦点的正确做法

  6. spring boot容器加载完后执行特定操作

    有时候我们需要在spring boot容器启动并加载完后,开一些线程或者一些程序来干某些事情.这时候我们需要配置ContextRefreshedEvent事件来实现我们要做的事情 1.Applicat ...

  7. 在iframe内页面完全加载完后,关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  8. 关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  9. jquery在页面加载完成后再append的元素事件无效问题

    最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...

随机推荐

  1. 【js基础修炼之路】— 我理解的原型链

    提起原型链,大家并不陌生,但是对于新人来说一提到原型方面的东西就会比较懵.在我自一次面试的时候,面试官也给我提了这样的问题,当时就按照我的理解说了一些,但是很肤浅,在此我希望给刚入门的前端小伙伴聊一下 ...

  2. Node.js与npm安装(转载)

    2009年的JSCOnf大会上,一个叫Ryan Dahl的年轻程序员向人们展示了一个他正在做的项目,一个基于Google V8引擎的JavaScript运行平台,它提供了一套事件循环和低IO的应用程序 ...

  3. S/4HANA和CRM Fiori应用的搜索分页实现

    在我的博客Paging Implementation in S/4HANA for Customer Management 我介绍了S/4HANA for Customer Management里采用 ...

  4. robotframework实战二---Jenkins连用

    1.下载插件robot Jenkins环境搭建就不用说了,网上有很多帖子,你在使用时,你需要做以下几步 因为目前我已经安装了 2.新建项目 因为有重名的项目,所以会提示以下内容 你需要配置的内容就两处 ...

  5. 2019.03.13 ZJOI2019模拟赛 解题报告

    得分: \(55+12+10=77\)(\(T1\)误认为有可二分性,\(T2\)不小心把\(n\)开了\(char\),\(T3\)直接\(puts("0")\)水\(10\)分 ...

  6. 百度非会员满速下载利器(IDM)Internet Download Manager v6.30.8 中文特别版

    下载利器(IDM)Internet Download Manager v6.30.8 中文特别版 所属分类:工具软件 应用平台:Windows 资源版本:v6.30.8 最后更新:2018年04月14 ...

  7. 【转】android gravity属性 和 weight属性

    有点忘记这两个属性了,复习一下. 来看这个布局文件 <?xml version="1.0" encoding="utf-8"?> <Linea ...

  8. python 3+djanjo 2.0.7简单学习(三)--Django 管理页面

    django里自带了一个管理页面,也就是后台,下面来学习一下 1.创建超级管理员 python manage.py createsuperuser 键入你想要使用的用户名,然后按下回车键: Usern ...

  9. 【洛谷P1967】[NOIP2013]货车运输

    货车运输 题目链接 显然,从一点走到另一点的路径中,最小值最大的路径一定在它的最大生成树上 所以要先求出最大生成树,再在生成树上找最近公共祖先,同时求出最小值. #include<iostrea ...

  10. 楔积(Wedge Procut)

    原文链接 由拓扑学中表面(Surface)的定义及实例引入楔积的概念. 基础知识 先看Surface在欧几里得空间内的定义: 所有在Omega中的点w(参数空间中的点)被记作: 对应在R3中(欧几里德 ...