威尼斯人线上娱乐

jQuery页面加载早先化的3种艺术,二种艺术达成在HTML页面加载完结后运转有些js

31 8月 , 2019  

jQuery
页面加载早先化的法子有3种 ,页面在加载的时候都会举办脚本,应该没有不同,主要看习贯吗,本身以为第三种艺术最佳,比较轻便。

js方法:

1.实行时间 

本文实例陈述了jQuery在页面加载时动态修改图片尺寸的方法。分享给我们供大家参谋。具体如下:

第一种:

复制代码 代码如下:

        window.onload必须等到页面内包罗图形的具有因素加载达成后才具奉行。
        $(document).ready()是DOM结构绘制完成后就实行,不必等到加载完毕。 

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_list img').each(function() {
    var maxWidth = 120;
    var maxHeight = 120;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
    if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
    }
  });
  //$("#contentpage img").show();
  // IMAGE RESIZE
});
$(document).ready(function(){ 
   alert("第一种方法。");  
}); 

<script type=”text/javascript”>

2.编纂个数不一致 

期待本文所述对大家的jQuery程序设计有所扶助。

第二种:

window.onload=function(){

        
window.onload不可能并且编写制定四个,借使有四个window.onload方法,只会实行叁个
         $(document).ready()能够何况编写制定七个,而且都得以拿走施行

你可能感兴趣的篇章:

  • 关于图片的预加载进程中遮掩未知的
  • 威尼斯人线上娱乐,jQuery页面加载早先化的3种艺术,二种艺术达成在HTML页面加载完结后运转有些js。js实现的页面加载完毕在此以前loading提醒功效完全示例【附demo源码下载】
  • jQuery页面加载最早化的3种情势(推荐)
  • 基于javascript实现页面加载loading效果
  • pace.js页面加载进度条插件
  • php简单计算页面加载时间的法子
  • 页面加载完后活动施行二个艺术的js代码
  • 二种方式完毕在HTML页面加载完结后运营某些js
  • jquery完毕在页面加载完毕后收获图片中度或宽度
  • jQuery页面加载开首化常用的两种办法
  • 概述三个页面从输入U中华VL到页面加载完的历程

 

var userName=”xiaoming”;

3.简化写法 

$(function(){ 
  alert("第二种方法。"); 
}); 

alert(userName);
}

        window.onload未有简化写法
         $(document).ready(function(){})能够简写成$(function(){});

 第三种:

</script>

$(document).ready(function(){
  // 执行代码
});
或者
$(function(){
  // 执行代码
});
jQuery(function($) { 

alert("第三种方法。"); 

}); 

以下为jQuery方法,要求援引jQuery文件。

在小编原先的支付中,一般用到javascript,小编都是选拔jquery的情势,也正是绝大大多时候,第一行写的是:

ps; 不用jQuery,在页面初步化的法子,

复制代码 代码如下:

$(document).ready(function(){
...
});

1.在body里面写onload

<script type=”text/javascript”>

这一年,不自然要等富有的js和图表加载落成,就足以实行一些方法,不过有一点点时候,须求求等有着的

2.在本子里面写

$(document).ready(function(){

要素都加载达成,才得以实施一些办法的时候,例如说,部分图片也许怎么样其余方面还从未加载好,这年,点击有些按键,会形成出现意外的事态,这年,就

window.onload=function(){ 
  //要初始化的东西 
} 

var userName=”xiaoming”;

亟需利用:

鉴于jquery使用$符号,那样和多少组件
,举个例子dwr就有争辨,为了减轻那个难点,能够采取

alert(userName);
});

$(window).load(function () 
{
  $("#btn-upload").click(function ()
  {
    //比如说:
    uploadPhotos();
  });
});
var j = jQuery.noConflict();  

</script>

下边是转发的开始和结果,

如此那般就用“j”来替换了$。

依然其简写

用$(window).load(function(){…})而不用body.onload()的多少个理由
率先它们都以在页面全部因素(包涵html标签以及援用到得所有图片,Flash等媒体)加载完结后实行的,那是它们的一路点.

如上那篇jQuery页面加载伊始化的3种方法(推荐)正是小编分享给我们的全体内容了,希望能给大家三个参阅,也盼望大家多多协助脚本之家。

复制代码 代码如下:

不用body.Onload()理由1:

您大概感兴趣的作品:

  • 至于图片的预加载进度中潜藏未知的
  • js实现的页面加载完结此前loading提醒成效总体示例【附demo源码下载】
  • 基于javascript完结页面加载loading效果
  • pace.js页面加载进度条插件
  • php轻易总括页面加载时间的方法
  • jQuery在页面加载时动态修改图片尺寸的点子
  • 页面加载完后自动实施一个措施的js代码
  • 二种方法达成在HTML页面加载达成后运营某些js
  • jquery达成在页面加载完结后获取图片中度或宽度
  • jQuery页面加载先导化常用的三种艺术
  • 概述二个页面从输入UENCOREL到页面加载完的长河

$(function(){
var userName=”xiaoming”;
alert(userName);
});

假定大家想同不常候加载七个函数,大家必得这么写

当dom加载完就能够举行(比window.onload更早)。在同三个页面里能够频仍现身.ready()

<body
onload=”fn1(),fn2()”></body>看起来最佳丑陋,就算用$(window).load()大家得以如此加载七个函数

PS:两个的第一分裂

$(window).load(function () 
{
  alert("hello,我是jQuery!");
});
$(window).load(function () 
{
  alert("hello,我也是jQuery");
});

window.onload:

诸有此类写它会从上往下实行那五个函数,何况看起来能够多了.

当三个文书档案完全下载到浏览器中时,才会触发window.onload事件。那意味页面上的漫天因素对js来讲都以能够操作的,也正是说页面上的保有因素加载实现才会实践。这种处境对编写功用性代码特别有益,因为不须求思虑加载的顺序。、

不用body.Onload()理由2:

$(document).ready{ }:

用body.Onload()不可见成功js和html完全分离,那是叁个很要紧的难题.

会在DOM完全就绪并得以行使时调用。尽管那也意味全体因素对剧本来讲都以足以访问的,可是,并不意味着全体关乎的文件都已经下载完结。换句话说,当HMTL下载完结并解析为DOM树之后,代码就能推行。

其它用$(window).load(function(){…})和body.onload()都设有同样贰个难题,因为开端也聊到了,它们都须要等到页面包车型大巴保有剧情

举贰个事例:

加载完成才施行,可是假设当网速一点也相当的慢的时候,加载贰个页面往往须求较长的小时(几秒到十几秒不等,乃至越来越长…),所以大家常常

倘若有三人作品展现图库的页面,这种页面中或许会包罗众多种型图像,大家得以由此jQuery遮掩、呈现或以别的方法操作这一个图像。假若大家通过onload页面设置界面,那么客户在力所能致利用这几个页面此前,必定要等到每一幅图像都下载完结。更不好的是,假设表现稍微加多给哪些具备暗中同意行为的因素(比方链接),那么客户的竞相恐怕会招致意外的结果。可是当大家试用$(document).ready(){
}进行设置时,这几个分界面就会更早地计划好可用的不错行为。

会高出页面还不曾完全加载达成而顾客已经在操作页面了这种状态,那样页面表现出来的职能就跟我们预料的效率不相同等了,

利用$(document).ready(){
}一般的话都要优于试用onload事件管理程序,但必供给明了一点的是,因为支撑文件只怕还并未有家在成功,所以类似图像的冲天和幅度那样的性格此时不断定有效。

就此在此地自个儿推荐应用$(document).ready(function(){}),或简写为$(function(){}),因为她会在页面包车型大巴dom成分加载实现后就实行,

注:用把js放在页面后面部分的章程以及使用defer=”defer”
的措施都以相会世难题的。最棒应用方面包车型地铁函数!

而无需等到图片或其余媒体下载完成.

您可能感兴趣的篇章:

  • 关于图片的预加载进程中潜藏未知的
  • js达成的页面加载完结在此以前loading提示作用总体示例【附demo源码下载】
  • jQuery页面加载初步化的3种方法(推荐)
  • 基于javascript达成页面加载loading效果
  • pace.js页面加载进度条插件
  • php轻松总计页面加载时间的措施
  • jQuery在页面加载时动态修改图片尺寸的格局
  • 页面加载完后自动实行三个措施的js代码
  • jquery完结在页面加载完成后获得图片中度或宽度
  • jQuery页面加载开端化常用的二种办法
  • 概述叁个页面从输入U宝马X3L到页面加载完的进程

不过临时确实我们有要求等到页面的享有东西都加载完后再施行大家想进行的函数,所以是该利用$(window).load(function(){…})照旧

该应用$(function(){})往往须求组合现实必要而作分歧的选取.

谈起底附上一段在颇具DOM元素加载从前执行的jQuery代码

<script type="text/javascript">
(function() {
      alert("DOM还没加载哦!");
    })(jQuery)
 </script>

呵呵,不常候大家也会有其一供给!

威尼斯人线上娱乐 1 以
浏览器装载文书档案为例,在页面加载达成后,浏览器会通过 Javascript 为 DOM
成分增添事件。在例行的 Javascript 代码中,平常使用 window.onload
方法,而在 Jquery 中,使用的是 $(document).ready() 方法。
$(document).ready() 方法是事件模块中最重大学一年级个函数,能够小幅的增进 Web
应用程序的快慢。

   window.load  $(document).ready() 

实行机缘  必得等待网页中存有的剧情加载完成后 ( 蕴涵图片 ) 手艺执行 
网页中兼有 DOM 结构绘制实现后就举行,能够能 DOM
成分关联的内容并不曾加载完 
编纂个数  不可能并且编写制定八个
以下代码不能正确实践:

window.onload = function(){ 
 alert(“text1”); 
}; 
window.onload = function(){ 
 alert(“text2”); 
}; 

结果只输出第一个  能何况编写制定七个
以下代码不易推行:

$(document).ready(function(){ 
 alert(“Hello World”); 
}); 
$(document).ready(function(){ 
 alert(“Hello again”); 
}); 

结果三回都输出 
简化写法  无 

 $(function(){ 
 // do something 
}); 

其他,须要留意一点,由于在 $(document).ready() 方法内注册的平地风波,只要
DOM 就绪就能够被推行,因而可能此时因素的涉及文件未下载完。比方与图片有关的
html 下载达成,並且一度分析为 DOM
树了,但很有比十分的大或许图片还不曾加载完成,所以比如图片的莫斯科大学和增长幅度那样的质量此时不明确有效。要缓慢解决这一个主题素材,可以行使
Jquery 中另贰个有关页面加载的点子 —load() 方法。 Load() 方法会在要素的
onload 事件中绑定二个管理函数。若是管理函数绑定给 window
对象,则会在享有内容 ( 包含窗口、框架、对象和图像等 )
加载完结后触发,假诺管理函数绑定在要素上,则会在要素的内容加载完成后触发。
Jquery 代码如下:

$(window).load(function (){ 
    // 编写代码 
});

等价于 JavaScript 中的以下代码

Window.onload = function (){ 
   // 编写代码 
}

新近在改四个平放在frame中的页面包车型的士时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测量检验寻常流畅,IE下将要等个十几秒jquery的功能才出现,南菜都凉了。

  发轫感觉是和本人onload加载的不二秘诀争辨。网络科学普及的说法是$(document).ready()是在页面DOM深入分析完结后进行,而onload事件是在富有能源都筹算实现之后才实行,也正是说$(document).ready()是要在onload在此以前推行的,尤其当页面图片非常大比较多的时候,这些时辰差恐怕越来越大。但是笔者那页面明显是图表都呈现出来十几秒了,还不见jquery的效果出来。

  删了onload加载的点子尝试,结果也许长久以来,看来没有需求把原先的onload事件绑定也改用$(document).ready()来写。那是何等来头使得Firefox不奇怪而IE就会啊?接着调节和测量检验,开掘IE下本来绑定的onload方法照旧先于$(document).ready()的原委实施,而Firefox则是先进行$(document).ready()的内容,再施行原本的onload方法。那一个和网络的布道就好像不完全一致啊,呵呵,有一些意思,好像更加的临近真相了。

  翻翻jquery的源码看看$(document).ready()是什么达成的呢:

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
      setTimeout( arguments.callee, 0 ); 
       return; 
    } 
   // and execute any waiting functions 
   jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready ); 

结果很明知道,IE唯有在页面不是置于frame中的情状下才和Firefox等一样,先实施$(document).ready()的从头到尾的经过,再试行原本的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上实践,所以本来是在原先的onload绑定的措施试行之后才轮到。而以此页面中恰恰在测量试验碰到下有叁个拜访不到的财富,这十几秒的延期便是它推广出的小时差。

以上就是本文的全体内容,通晓越来越多jQuery的语法,大家能够查看:《jQuery
1.10.3
在线手册》,也期待大家多多援救脚本之家。

你或者感兴趣的篇章:

  • jquery选拔器原理介绍($()使用方法)
  • Jquery选拔器 $实现原理
  • jQuery的三种$()
  • jQuery中$.fn的用法示例介绍
  • jQuery中$(function()
    {});难点详解
  • (function($){…})(jQuery)的意思
  • jquery中的$(document).ready()使用小结
  • JQuery中$之选拔器用法介绍
  • jquery $.fn
    $.fx是何许看头有啥样用
  • JQuery中$(document)是哪些看头有如何功用
  • jQuery中$原理实例解析


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图