js和jquery如何实现自动加载图片(附代码)

这次给大家带来js和jquery如何实现自动加载图片(附代码),js和jquery实现自动加载图片的注意事项有哪些,下面就是实战案例,一起来看一下。

一、JavaScript自动加载

①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下:

           

登录后复制

②在脚本中用window.onload: 当页面中的所有内容(包括图片)加载完后再执行window.onload,如下:

window.onload = function(){...}; //正确写法,这是匿名函数//------------↓多个window.onload的错误写法-------------window.onload = function(){alert("text1");}; //不执行window.onload = function(){alert("text2");}; //执行//------------↑---------------------------------------//------------↓多个window.onload的正确写法---------------------------window.attachEvent("onload",function(){alert('a')});window.attachEvent("onload",function(){alert('b')});window.attachEvent("onload",function(){alert('c')});//重点提示:在IE浏览器下用 (window.attachEvent),会弹出 c b a //重点提示:其他浏览器下用 (window.addEventListener),会弹出 a b c//------------↑-----------------------------------------------------

登录后复制

二、jQuery自动加载

①当页面中DOM结构(不包含图片)加载完后再执行(可能DOM元素关联的东西并没有加载完),有三种写法,如下:

$(document).ready(function(){...});//写法1,全称 $(function(){...});        //写法2,简写 jQuery(function($){...});     //写法3,简写

登录后复制

②页面中所有元素(包括图片)加载完成才执行,如下。

$(window).load(function() {...}); //等于JavaScript的写法,如window.onload = function(){...};

登录后复制

③立即执行匿名函数。 当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来,有两种写法,如下:

(function(){...})();    //写法1,不加参数(function($){...})(jQuery); //写法2,加参数,避免与其他变量发生冲突

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是js和jquery如何实现自动加载图片(附代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772323.html

(0)
上一篇 2025年3月8日 13:13:51
下一篇 2025年3月8日 13:14:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 操作modal单次加载数据

    这次给大家带来操作modal单次加载数据,操作modal单次加载数据的注意事项有哪些,下面就是实战案例,一起来看一下。 1. Bootstrap 模态对话框和简单使用 x 对话框标题 对话框主体 取消 确定 登录后复制 可以使用按钮或链接直…

    编程技术 2025年3月8日
    200
  • datatable怎样实现异步加载

    这次给大家带来datatable怎样实现异步加载,datatable实现异步加载的注意事项有哪些,下面就是实战案例,一起来看一下。 table部分代码 用户名 渠道名 游戏名 结果 耗时 创建时间 登录后复制 异步加载数据并实现定制化 下面…

    编程技术 2025年3月8日
    200
  • 原生JS有哪些实现Ajax异步的方法

    这次给大家带来原生JS有哪些实现Ajax异步的方法,原生JS实现Ajax异步的注意事项有哪些,下面就是实战案例,一起来看一下。 在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery…

    编程技术 2025年3月8日
    200
  • js如何匹配计算font-size

    这次给大家带来js如何匹配计算font-size,js匹配计算font-size的注意事项有哪些,下面就是实战案例,一起来看一下。 实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员…

    编程技术 2025年3月8日
    200
  • 如何从小程序中提取公用函数到util.js

    本篇文章给大家分享的内容是如何从小程序中提取公用函数到util.js ,有着一定的参考价值,有需要的朋友可以参考一下 在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要…

    2025年3月8日
    200
  • 浅析手机滑动插件—iscroll.js

    本篇文章给大家分享的内容是浅析手机滑动插件–iscroll.js,有着一定的参考价值,有需要的朋友可以参考一下 话不多说,直接上代码: //实例化滚动插件    var myScroll = new IScroll(‘#wrap…

    编程技术 2025年3月8日
    200
  • 用NodeJS让视频转码

    这次给大家带来用NodeJS让视频转码,用NodeJS让视频转码的视频有哪些,下面就是实战案例,一起来看一下。 视频转码就是一个先解码,再编码的过程,从而将原来的视频转换成我们需要的视频。这种转换可能包括各式(mp4/avi/flv等)、分…

    编程技术 2025年3月8日
    200
  • Emergence.js插件的使用详解

    这次给大家带来Emergence.js插件的使用详解,Emergence.js插件使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Emergence.js 是一个轻量级,高性能的 JS 插件,用于检测和操作浏览器中的元素。 这个插件…

    编程技术 2025年3月8日
    200
  • JS实现五子棋小游戏

    这次给大家带来JS实现五子棋小游戏,JS实现五子棋小游戏的注意事项有哪些,下面就是实战案例,一起来看一下。 思路: 1、先用canvas画五子棋的棋盘2、获取鼠标点击的位置3、根据鼠标点击的位置判断,并画棋子4、根据下的棋子判断是否赢了 代…

    编程技术 2025年3月8日
    200
  • 关于js的一些小知识点代码分享

    本篇文章给大家分享的内容是关于js的一些小知识点代码分享 ,有着一定的参考价值,有需要的朋友可以参考一下 js 防止重复提交 第一种方式 点击时返回false   2. 点击时,把按钮变为不可用 比如 disabled  var feedb…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论