TearSnow Fan
心存高远，脚踏实地。
您当前位置 :
>> 如何解决Shopex4.8.5中关于 Mootools和jQuery 的冲突问题?
如何解决Shopex4.8.5中关于 Mootools和jQuery 的冲突问题?
ShopEx4.8.5系统用了很多客户端JS特效，特别是后台的管理界面，为了给用户更好的软件体验，更是大量加入了Javascript脚本实现界面和Ajax操作。
ShopEx的Js脚本都扩展于Mootools脚本库，mootools和jquery一样是属于比较轻巧的Js库，是做前端开发必不可少的脚本库，两者功能相近，开源协议也一样都可以使用 MIT license，Jquery的插件库更丰富一点，在国内使用Jquery的网站也多于mootools，要找些现成的JS脚本制作ShopEx插件应该是更容易，那为什么ShopEx的设计者当初选用了Mootools作为前端脚本库而不是Jquery。ShopEx系统研究认为这可能是设计者的技术偏好，因为mootools更符合所谓的编程模式，让开发人员更容易去定义扩展一个类，代码的类结构更合理清晰，写一个类所需的代码量更少，所以决定选用mootools也合情合理，因为开发人员的出发点永远是写最少的代码在最多的地方使用，达到代码重用的目的。
不过这增加了普通模板设计师以及第三方服务商基于ShopEx系统定制做模板和插件的难度，因为Jquery更直接简单，国内可找到的资源多，论坛上也有用户提到一个办法可以解决在ShopEx系统中使用Jquery冲突的办法，虽然比较麻烦不利于升级，有急需安装某个Jquery效果的也可以一试：
解决Shopex中关于 Mootools和jQuery 的冲突问题的方法
在你的模板目录/block/header.html 里面的&/head&标签前添加以下代码
&script language=”javascript” src=”js/jquery.js”&&/script&
&script language=”javascript”&
jQuery.noConflict();
然后是替换选择器，把使用jquery里面的所有$都替换为jQuery。
本文固定链接:
【上一篇】【下一篇】
最新日志热评日志随机日志
日志总数：132 篇
评论总数：28 篇
分类总数：19 个
标签数量：27 个
链接总数：0 个
建站日期：
运行天数：1096 天
最后更新：页面导航：
→ 正文内容 jQuery实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js实例代码
这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码，有需要的朋友可以参考一下
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，在闭包中，主要判断isReady值来执行操作，如果dom结构准备就绪(isReady === true)，执行回调，否则将回调加入到要执行的队列(funs)中，待事件处理程序执行时，循环遍历队列(funs)，并依次执行队列中的函数，执行完队列中的函数后，还需要清除队列(funs = null)。 代码如下:var ready = (function(){&&& var isReady = false,&&& funs = [];&&& function handle (e) {&&&&&&& if ( isReady ) {&&&&&&&&&&&&&&&&&& }&&&&&&& if ( e.type === 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {&&&&&&&&&&&&&&&&&& }&&&&&&& for ( var i = 0; i & funs. i++ ) {&&&&&&&&&&& funs[i].call(document);&&&&&&& }&&&&&&& isReady =&&&&&&& funs =&&& }&&& if ( document.addEventListener ) {&&&&&&& document.addEventListener( 'DOMContentLoaded', handle, false );&&&&&&& document.addEventListener( 'readystatechange', handle, false );&&&&&&& document.addEventListener( 'load', handle, false );&&& }&&& else if ( document.attachEvent ) {&&&&&&& document.attachEvent( 'onreadystatechange', handle );&&&&&&& document.attachEvent( 'onload', handle );&&& }&&& return function ready (callback) {&&&&&&& if ( isReady ) {&&&&&&&&&&& callback.call(document);&&&&&&& }&&&&&&& else {&&&&&&&&&&& funs.push(callback);&&&&&&& }&&& };}());PS:该函数代码参照于权威指南书籍，唯一不同的是，多加了一个判断document.readyState !== 'interactive' 代码如下:if ( e.type === 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {&&&}在各个浏览器中交互和完成状态出现顺序并不能保证一致，这取决于浏览器及页面的内容，多加了这个判断document.readyState !== 'interactive'的话，意思是不管哪个阶段先出现，代码都能更早的执行。二、按需加载css，js参照了jQuery源码，写了一个type函数，返回参数类型。
代码如下:/**&*&* 判断参数类型&* createTime: &*&*/function type (obj) {&&& var classTypes, objectT&&& if ( obj == null ) {&&&&&&& return String(obj);&&& }&&& classTypes = {};&&& objectTypes = ('Boolean Number String Function Array Date RegExp Object Error').split(' ');&&& for ( var i = 0, len = objectTypes. i & i++ ) {&&&&&&& classTypes[ '[object ' + objectTypes[i] + ']' ] = objectTypes[i].toLowerCase();&&& }&&& if ( typeof obj === 'object' || typeof obj === 'function' ) {&&&&&&& var key = Object.prototype.toString.call(obj);&&&&&&& return classTypes[key];&&& }&&&} 代码如下:// css按需加载function loadCss (cssUrl, callback) {&&& var elem, bl,&&&&&&& isExecuted = // 防止在ie9中，callback执行两次&&& if ( cssUrl == null ) {&&&&&&& return String(cssUrl);&&& }&&& elem = document.createElement('link'),&&& elem.rel = 'stylesheet';&&& if ( type(callback) === 'function' )& {&&&&&&& bl =&&& }&&& // for ie&&& function handle() {&&&&&&& if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {&&&&&&&&&&& if (bl && !isExecuted) {&&&&&&&&&&&&&&& callback();&&&&&&&&&&&&&&& isExecuted =&&&&&&&&&&& }&&&&&&&&&&& elem.onreadystatechange =&&&&&&& }&&& }&&& elem.onreadystatechange =&&& // for 非ie&&& if (bl && !isExecuted) {&&&&&&& elem.onload =&&&&&&& isExecuted =&&& }&&& elem.href = cssU&&& document.getElementsByTagName('head')[0].appendChild(elem);}// js按需加载function loadScript(scriptUrl, callback) {&&& var elem, bl,&&&&&&& isExecuted = // 防止在ie9中，callback执行两次&&& if (scriptUrl == null) {&&&&&&& return String(fn);&&& }&&& elem = document.createElement('script');&&& if ( type(callback) === 'function' )& {&&&&&&& bl =&&& }&&& // for ie&&& function handle(){&&&&&&& var status = elem.readyS&&&&&&& if (status === 'loaded' || status === 'complete') {&&&&&&&&&&& if (bl && !isExecuted) {&&&&&&&&&&&&&&& callback();&&&&&&&&&&&&&&& isExecuted =&&&&&&&&&&& }&&&&&&&&&&& elem.onreadystatechange =&&&&&&& }&&& }&&& elem.onreadystatechange =&&& // for 非ie&&& if (bl && !isExecuted) {&&&&&&& elem.onload =&&&&&&& isExecuted =&&& }&&& elem.src = scriptU&&& document.getElementsByTagName('head')[0].appendChild(elem);}PS: 在判断link，script元素是否加载完毕，主要依靠load事件；而在ie9以下浏览器中，并没有load事件，ie为它们都添加了一个readystatechange事件，通过判断元素的readyState状态确定元素是否已经加载完毕；而奇怪的是，在ie9(还可能存在其他浏览器版本)中，元素既有load事件又有readystatechange事件，因此在代码中添加了一个变量isExecuted，如果执行过回调，那么就不再执行，避免回调执行两次。三、调用方式 代码如下:loadCss('http://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){&&& console.log('css加载完毕');});loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){&&& console.log('js加载完毕');});ready(function(){&&& console.log('dom is ready!');});
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行感谢本文作者
昵称：汤帅
加入时间： 14:47:00
这家伙很懒，虾米都没写
感谢以下赞助商您现在的位置： &
使用jquery插件实现图片延迟加载技术详细说明
使用jquery插件实现图片延迟加载技术详细说明
　　这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址：一、快速使用篇 1.导入JS插件 　　复制代码 代码如下:　　&script src="js\jquery.js" type="text/javascript"&&/script& &script src="js\jquery.lazyload.js" type="text/javascript"&&/script&
2.在你的页面中加入如下的javascript： 　　复制代码 代码如下:　　&script type="text/javascript"& $("img").lazyload(); &/script&
这将会使所有的图片都延迟加载； 二、高级篇详细介绍（不想了解那么多的可以直接绕过） Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 　　复制代码 代码如下:　　&script src="jquery.js" type="text/javascript"&&/script& &script src="jquery.lazyload.js" type="text/javascript"&&/script&
并且在你的执行代码中加入下面语句: 　　复制代码 代码如下:　　$("#xd").lazyload();
这将使id=”xd” 区域下的图片将被延迟加载. 设置敏感度 插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载). view sourceprint?$("#xd").lazyload({ threshold : 200 }); 将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.) 占位图片 你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1×1 象素的图片已经包含在插件里面. 　　复制代码 代码如下:　　$("img").lazyload({ placeholder : "img/grey.gif" });
事件触发加载 事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做: 　　复制代码 代码如下:　　$("img").lazyload({ placeholder : "img/grey.gif", event : "click" });
使用特效 当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. 这是演示页面. 　　复制代码 代码如下:　　$("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" });
图片在容器里面 你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动的演示页面. CSS 代码: #container { height: 600overflow: } JavaScript 代码: 　　复制代码 代码如下:　　$("img").lazyload({ placeholder : "img/grey.gif", container: $("#container") });
当图片不顺序排列 滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为. 　　复制代码 代码如下:　　$("img").lazyload({ failurelimit : 10 });
将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点. 延迟加载图片 Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载. 这是延迟加载演示页面. 　　复制代码 代码如下:　　$(function() { $("img:below-the-fold").lazyload({ placeholder : "img/grey.gif", event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); });
&&&主编推荐
&&&热门试卷
&&&最新视频
&&&热门阅读
&&&最新问答
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&湘教QS2-164&&增值电信业务经营许可证湘B2-