jQuery技术

jquery图片延迟加载教程-完美版

字号+ 作者:H5之家 来源:H5之家 2017-04-05 12:04 我要评论( )

本猫最近终于把jquery图片延迟加载特效完成了,这期间找了好多网站,好多教程,无一例外,都说要先加载jquery和lazyload的插件,但是都没有提供下载地址!!!!

本猫最近终于把jquery图片延迟加载特效完成了,这期间找了好多网站,好多教程,无一例外,都说要先加载jquery和lazyload的插件,但是都没有提供下载地址!!!!或者只提供了其中的一个!!!!这让我等菜鸟很恼火,所以本猫现在就把下载地址贴出来,让大家都能顺利实现图片延迟加载特效,文末有下载地址

教程开始

将以下代码粘贴到wordpress主题的header.php中

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.lazyload.js" ></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>

如图


注意src之间的地址根据js文件存放地址进行更改(比如:src="http://maolihui.com/jquery.js" 这个就是存放在根目录的写法"),我是放在主题下的scripts文件夹里的。因为我的WP主题里其他的Js都放这个文件夹里的。
如果你还是不知道放哪里,那么打开你的header.php或其他php文件,用查找功能搜索关键字“js”,看看主题作者的地址是怎么写的,你就再模仿他的写法,把js的文件名改成jquery.js和jquery.lazyload.js就ok了。

最后就是下载js文件,压缩包里已经都有了,放到相应位置即可

总结:要实现特效,其实就2步,第一步:输入代码(可能出错的地方就只有js文件的地址是否正确)第二步:把下载下来的js放在src所指的地方。



 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery学习笔记(一)——验证用户名

    JQuery学习笔记(一)——验证用户名

    2017-04-05 09:02

  • Demo学习: Basic jQuery

    Demo学习: Basic jQuery

    2017-04-05 09:01

  • jquery学习笔记免费下载

    jquery学习笔记免费下载

    2017-04-05 08:00

  • jQuery学习之:jqGrid表格插件

    jQuery学习之:jqGrid表格插件

    2017-04-04 18:01

网友点评