欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

javascript

shiping1 的头像

JS延迟加载百度分享代码，提高网页速度

星期五, 2013-08-23 10:02 — shiping1

JS延迟加载百度分享代码，提高网页速度

返回脚本百事通

相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮，目前流行的有JiaThis、百度分享、Bshare等，目前用百度分享的居多。

发现很多网站在放置百度分享代码的时候，简单的将分享代码放置到固定的网页位置就完事了，这是非常致命的方式。因为，我经常打开一个网页的时候，发现在网页加载到分享代码的时候，有时候花上几秒的时候来请求百度的服务器，最后展示分享按钮。

其实，像这样对网页来说不是非常重要的功能，我们大可以用JS来延迟加载，从而提高网页主要内容的快速加载显示。

这里分享下我的放置方式。

一、copy百度分享代码，如下：

 

普通分类: 
javascript
shiping1 的头像

Javascript 加载性能优化

星期五, 2013-08-23 09:57 — shiping1

阻塞特性

浏览器对javascript的处理主要有2部分：下载和执行

  • 下载在有些浏览器中是并行的，有些浏览器中是串行的，如IE8、Firefox3、Chrome2都是串行下载的
  • 执行在所有浏览器中默认都是阻塞的，当js在执行时不会进行html解析等其它操作

阻塞特性：

javascript有个阻塞特性，当浏览器执行javascript代码时，不能同时做其它任何事情。无论当前javascript代码是内嵌还 是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。浏览器在下载和执行脚本是进出现阻塞的原因在于，脚本可能会改变页面或 javascript的命名空间，它们对后面页面内容造成影响。

一、脚本位置

浏览器在碰到一个引入外部javascript文件的<script>标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了。例：

普通分类: 
javascript
shiping1 的头像

在服务端合并和压缩JavaScript和CSS文件

星期五, 2013-08-23 08:25 — shiping1

Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有 合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合 并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压缩也有类似的情况。而利用 服务端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。

普通分类: 
javascript
shiping1 的头像

使用jQuery插件实现图片延迟加载以及对SEO的影响

星期五, 2013-08-23 08:17 — shiping1

使用jQuery插件实现图片延迟加载以及对SEO的影响

jquery搜索引擎脚本javascript
普通分类: 
javascript
shiping1 的头像

js 垂直滚动代码 有大用

星期三, 2013-08-21 16:46 — shiping1

<div id="demo2" style="overflow:hidden;width:100px;height:200px;border:1px solid red;">
<table cellpadding="1" cellspacing="1">
 <tr>
    <td valign="top" id="marquePic21">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
         <tr align="center">
          <td><img src="img.gif" width="70" height="70" border="0"></td>
          </tr>
           <tr align="center">

普通分类: 
javascript
shiping1 的头像

水平滚动代码

星期三, 2013-08-21 16:45 — shiping1

<div id="demo" style="overflow:hidden;width:550px;border:1px solid red;">
<table cellpadding="1" cellspacing="1">
 <tr>
 <td valign="top" id="marquePic1">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr align="center">
 <td><img src="img.gif" width="70" height="70" border="0"></td>
 <td><img src="img.gif" width="70" height="70" border="0"></td>
 <td><img src="img.gif" width="70" height="70" border="0"></td>

普通分类: 
javascript
shiping1 的头像

让文本框 只能输数字 不能输字母

星期一, 2013-08-19 17:39 — shiping1

<input type="text" name="tel" onkeyup="value=value.replace(/\D+/g,'')" check="2" id="tel">

普通分类: 
javascript
shiping1 的头像

判断图片加载完成（js,jquery)代码

星期二, 2013-08-13 14:46 — shiping1

判断图片加载完成（js,jquery)代码

判断图片加载完成（网页特效,jquery)代码

 var totalimages = 10;
var loadedimages = 0;
$(“<img/>”).load(function() {
++loadedimages;
if(loadedimages == totalimages)
{//全部图片加载完成时….. } });


js 判断图片是否加载完毕

普通分类: 
javascript
shiping1 的头像

简单图片的onload事件实现图片预加载 这个好像不太好

星期二, 2013-08-13 10:10 — shiping1

做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让 图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：

function preLoadImg(url) {
	var img = new Image();
	img.src = url;
}

通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。

实际上，这里用到的预下载功能也和这基本一致。图片预下载下来后，通过 img的width和height属性，就能知道图片的宽和高了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这 个时候才会调用上边类似的代码来加载图片。因此，如果你直接用img，width的时候，图片还没有完全下载下来。

因此，需要用一些异步的方法，等到图片 下载完毕的时候才会再对img的width和height进行调用。实现这样的异步方法实际上不难，图片的下载完毕事件也很简单，就是简单的onload事件。因此，我们可以写出下面的代码：

普通分类: 
javascript
shiping1 的头像

通过$.Deferred 实现判断N个图片加载完毕逻辑

星期二, 2013-08-13 09:06 — shiping1

 

JavaScriptImagejqueryDeferred图片加载判断

     最近，图片分享的兴起，关于图片的JS效果也多了起来，比如自动缩放、自动排版等

普通分类: 
javascript
shiping1 的头像

image的加载事件(onload)和加载状态(complete)

星期二, 2013-08-13 09:04 — shiping1

image的加载事件(onload)和加载状态(complete)

(2012-05-23 10:20:11)
转载▼
标签：

普通分类: 
javascript
shiping1 的头像

加载中进行等待图像的技术

星期二, 2013-08-13 08:26 — shiping1

<div class="rg-image-wrapper">        
   <div class="rg-image-nav">   
    <a style="display: block; width: 50%; cursor: url('/templets/default/images/move-prev-next/bg11.cur'), auto; height: 100%; outline: medium none;" class="rg-image-nav-prev" href="#">Previous Image</a>    
   <a style="display: block; width: 50%; cursor: url('/templets/default/images/move-prev-next/bg12.cur'), auto; height: 100%; outline: medium none; " class="rg-image-nav-next" href="#">Next Image</a>         
     </div>

普通分类: 
javascript
shiping1 的头像

用JS 判断图片已经加载完成(兼容IE 和 Firefox)

星期一, 2013-08-12 18:22 — shiping1

js 判断图片已经加载完成 是一个很常见的问题，网上也有很多的解决方案。但是运行后很多都不兼容，或者
说，存在一些奇怪的问题。一种解决方案是都用onload。因为onload 在ie 下有同步方面的问题。
所以，我用了 onreadystatechange 。 代码和 使用方法如下：

 

普通分类: 
javascript
shiping1 的头像

JS判断img图片是否加载完成

星期一, 2013-08-12 18:16 — shiping1

function isImgLoad(){
 

普通分类: 
javascript
shiping1 的头像

firefox 报错 Image corrupt or truncated:http://localhost/xxx/xxx/xx/xxx/xxx.jpg

星期六, 2013-08-10 19:21 — shiping1

问题找到了，是图片本身的问题，它或许不是一个真正的jpg。

普通分类: 
javascript
shiping1 的头像

几个使用jQuery的图片预加载函数

星期六, 2013-08-10 19:02 — shiping1
2011年12月31日 by Kamal in javascript | 评论关闭

最近项目中用到的一个功能，用户进入网站时显示loading页面，直到主页的几个大图片加载完成才渐隐进入主页。自己写了个插件，看起来结构挺糟糕的，不好意思放到项目里。在网上搜现成的，还挺多。

普通分类: 
javascript
shiping1 的头像

JS 图片预加载技术

星期六, 2013-08-10 18:58 — shiping1

JS 图片预加载技术

15 Dec 2011-JavaScript

18

JS 图片预加载技术

项目开发中时常需要用 JS 判断一张图片是否加载成功，

如果图片加载成功，则执行其相应的 onload 绑定事件，

这个就是我们所说的图片预加载技术，先上最终版代码：

普通分类: 
javascript
shiping1 的头像

用javascript预加载图片、css、js的方法研究

星期六, 2013-08-10 18:52 — shiping1

用javascript预加载图片、css、js的方法研究

预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验。在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户。不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果。

先说需要知道的服务器返回的status code：
status-code: 200 - 客户端请求成功
status-code: 304 - 文件已经在浏览器缓存中，服务器告诉客户端，原来缓冲的文档还可以继续使用。
本文测试判断文件被是否被缓存，用的就是判断是否返回304.

普通分类: 
javascript
shiping1 的头像

图片预加载技术 这个是ok

星期六, 2013-08-10 18:36 — shiping1

1.  图片预加载：在我们浏览网页时，可能会遇到大图片显示慢而影响到了页面其他功能的执行，或是因为网速慢等原因造成。从而我们需要预加载，不能让图片的下载与显示影响到页面其他部分。

通常的解决方案是：

a. 将图片替换成一些固定的某张小图片以实现预加载，然后再在底部的js通过img的onload函数替换已加载好笑图片的src为真正的图片地址。这样的方法可行，但是只适用于已知了固定尺寸且图片不是很大且可能很多这类图片的情况；

普通分类: 
javascript
shiping1 的头像

ckeditor IE7 IE6报错 c.getselection()为空或不是对象

星期六, 2013-08-10 13:06 — shiping1 
在config.js加入如下配置： config.start
普通分类: 
javascript
shiping1 的头像

js判断浏览器

星期一, 2013-08-05 20:08 — shiping1

var Browser = {
    ie:/msie/.test(window.navigator.userAgent.toLowerCase()),
    moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),
    opera:/opera/.test(window.navigator.userAgent.toLowerCase()),
    safari:/safari/.test(window.navigator.userAgent.toLowerCase())
};

 

if(Browser.moz){
            alert(111);
        }

普通分类: 
javascript
shiping1 的头像

js 延迟加载原理

星期六, 2013-08-03 18:27 — shiping1

实现原理很简单，

普通分类: 
javascript
shiping1 的头像

js 杀死错误 kill

星期六, 2013-08-03 18:00 — shiping1

<SCRIPT LANGUAGE="javascript">   
<!-- Hide   
function killErrors() {   
return true;   
}   
window.onerror = killErrors;   
// -->   
</SCRIPT>

普通分类: 
javascript
shiping1 的头像

js判断浏览器

星期六, 2013-08-03 10:53 — shiping1

var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

var is_gecko= (navigator.product == "Gecko");
var is_webkit=agt.indexOf('webkit')>-1;
var is_safari = (agt.indexOf('chrome')==-1)&&is_webkit;
var is_ie6 = is_ie && /msie (\d)\./.test(agt) && parseInt(RegExp.$1) < 7;
var is_ie7 = is_ie && /msie (\d)\./.test(agt) && parseInt(RegExp.$1) == 7;

 

 

普通分类: 
javascript
shiping1 的头像

js parseInt

星期一, 2013-07-29 19:11 — shiping1 
parseInt语法：parseInt(string, radix);
　　其中string为要转换的字符串，radix为二进制，八进制，十六进制或十进制。
　　在默认不指定radix时，当以0x开关时，为十六进制；如果以0开头且第二位不为x,则认为是八进制，（因为八进制不能有8，9所以报错返回0）。
 

首先还是从很热门的实例parseInt("09")==0说起。

parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。

比如说parseInt("010",10)就是10进制的结果：10，parseInt("010",2)就是2进制的结果：2，parseInt("010",8)就是8进制的结果：8，parseInt("010",16)就是16进制的结果：16。

下面我来说说没有指定进制单位的时候，默认是10进制，但：如果是里面的Number是0开头的就认为是8进制的，如果是0x开头的就认为是16进制的。
普通分类: 
javascript
shiping1 的头像

js 垂直滚动代码 有大用

星期五, 2013-07-05 14:33 — shiping1

<div id="demo2" style="overflow:hidden;width:100px;height:200px;border:1px solid red;">
<table cellpadding="1" cellspacing="1">
 <tr>
    <td valign="top" id="marquePic21">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
         <tr align="center">
          <td><img src="img.gif" width="70" height="70" border="0"></td>
          </tr>
           <tr align="center">

普通分类: 
javascript
shiping1 的头像

js 水平滚动代码 有大用

星期五, 2013-07-05 14:32 — shiping1

<div id="demo" style="overflow:hidden;width:550px;border:1px solid red;">
<table cellpadding="1" cellspacing="1">
 <tr>
 <td valign="top" id="marquePic1">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr align="center">
 <td><img src="img.gif" width="70" height="70" border="0"></td>
 <td><img src="img.gif" width="70" height="70" border="0"></td>
 <td><img src="img.gif" width="70" height="70" border="0"></td>

普通分类: 
javascript
shiping1 的头像

js的 document.write方法

星期五, 2013-06-28 15:53 — shiping1

<html>
<head>
<title>用length属性得到字符串长度的Javascript示例</title>
</head>
<body>

<script type="text/javascript">
var vText="I like blabla.cn"
document.write("<p>" + vText + "</p>")
document.write(vText.length)
</script>

<p>Javascript示例代码解释：首先声明一个变量vText，将"I like blabla.cn"赋值给vText，然后用document.write将其显示出来；然后用length属性，计算得出vText的长度，并将其显示出来，vText里面包含16个字符，空格也是计算在内的，最后得出结果就是16。如果你写中文，就会得出中文字符的长度。比如你写，"我就喜欢布啦布啦"，就会得到这个字符串的长度，是8。
</p>

</body>

普通分类: 
javascript
shiping1 的头像

js keyup keydown keypress

星期五, 2013-06-28 15:36 — shiping1

KeyDown：在控件有焦点的情况下按下键时发生。

普通分类: 
javascript
shiping1 的头像

js 刷新

星期五, 2013-06-21 11:28 — shiping1

//这两个好像是有区别的
window.location.href=location.href;
window.location.reload();


//指的是 在浏览器上的 url,,,当然在 浏览器上是伪静态,得出的 location.href 也是伪静态
alert(location.href);


<script>   
  alert("1:   "   +   window.location.href);   
  alert("2:   "   +   window.location);   
  alert("3:   "   +   location.href);   
  alert("4:   "   +   parent.location.href);   
  alert("5:   "   +   top.location.href);   
  alert("6:   "   +   document.location.href);   
</script>



 

普通分类: 
javascript

页面

Subscribe to RSS - javascript
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2