页面图片过多加载慢_网站打开后再加载图片

页面图片过多加载慢页面图片过多加载慢页面图片过多加载慢页面图片过多加载慢 网站打开后再加载图片网站打开后再加载图片网站打开后再加载图片网站打开后再加载图片 最近看了一些大型的网站也技术，分析可知，由于有些网站首页的缩略图比较多，这样在页 面加载的时候大大降低了页面的加载速度，为了提高页面的加载速度，需要实现对图片的一 部加载，实现的原理分析可知，在 img标签的 src前期设置为空，将实际的 url赋给其他的 一个属性，例如 data-src属性，然后再页面的 dom都加载完成后，通过 js去设置 img的 src 值为 data-src这样就可以实现异步加载图片的效果。 代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下： 先上 jQuery 的方法： $(document).ready(function(){ $('#submitBtn').click(function() { var imgSrc = $(this).next().find('.logo').attr('data-src'); $(this).next().find('.logo').attr('src', imgSrc); }); }); 再比较一下 JavaScript 的方法： window.onload = function(){ document.getElementById('submitBtn').onclick = submitBtn; } function submitBtn(){ var imgTag = document.getElementById('box').getElementsByTagName('img'); var imgSrc = imgTag[0].getAttribute('data-src'); imgTag[0].setAttribute('src',imgSrc); } 学习自： 谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。 看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延 缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内 的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载。lazyload就 是用来实现这种效果。 lazyload.js其实是 jQuery的一个插件，全称是 jquery.lazyload.js，看它的名字就知道它的作 用了——就是偷懒载入的意思。由于它是 javascript 写的，所以适用于所有网页，包括 Wordpress。 想要使用 lazyload，得先载入 jQuery，它是依靠 jQuery来实现效果的。至于 jQuery，大家不 用去下载了，可以直接连接存放在 Google服务器上的 jQuery文件，永远不用担心丢失（当 然，如果有天朝完全屏蔽 Google的那一天的话……） 特效优点： 加速 wordpress站点的页面载入速度； 不唐突的图片渐显方式； 代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js 原理： 这个特效是少有的即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非则 加载预留的填充图片 grey.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片 地址才会加载。 也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何 乐而不为呢？ 不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片; 实现方法： 下载 jquery.lazyload.js 下载 预填充图片 fill.gif 点此打包下载（或者本文后面下载，已经上传） 将上面2文件，放到您的网站的某个目录，或者你直接在外站调用. 在当前主的 header.php 中适当位置添加下面 JS调用代码，我当期用的 inove主题后台就 有添加 js代码的地方： 【$("img")部分可以限定对页面中的哪些 img生效】比如修改成 $(".content img") 压缩包中除了 lazyload.js外，还有一个 grey.gif图片文件。这个图片的作用是，当页面上图 片未载入时，就显示这张图片。将 JS文件与图片传到你的空间，然后在你主题的 header.php 文件中加入 zhaosf.com:http://www.zhaosf999sf.com 页面图片过多加载慢网站打开后再加载图片