jQuery/JavaScript 实现的异步加载图片效果

在上代码之前先说一下简单的原理，我们知道在 img 标签中的 src 属性是指向图片地址，要实现异步加载，就先暂时不给 src 属性赋值，而是先找个中间变量的属性 data-src，把图片地址写在 data-src 属性里，然后当触发 onclick 事件的时候，把 data-src 的值复制给 src，也就实现了异步加载。

代码时间到，因为无论是 jQuery 还是 JavaScript 的方法，HTML 的结构是相同的，如下：

 代码如下 复制代码
<div id="box">
    <input type="submit" value="异步加载图片" id="submitBtn" />
    <div class="picBox">
        <img data-src="logo.png" alt="" class="logo" />
    </div>
</div>

先上 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);
}

再来玩一下这个 DEMO，按照这个原理，发现自己写一个 lazyload 的 jQuery 插件也并不是很难嘛，哈哈～

 代码如下 复制代码

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <script type="text/javascript" src="jquery.min.1.3.1.js"></script>
 <style type="text/css">
  .box{
   padding:10px;
  }
  .picBox{
   width:265px;
   height:137px;
   border:1px dashed #999;
  }
  .picBox img{
   width:100%;
   height:100%;
   display:block;
  }
 </style>
 <title>jQuery/JavaScript 实现的异步加载图片</title>
</head>
<body>
 <!-- S jqAjax -->
 <div id="jqAjax" class="box">
  <input type="submit" value="jQuery 异步加载图片" id="jqAjaxBtn" />
  <div class="picBox">
   <img data-src="logo.png" src="blank.gif" alt="" class="logo" />
  </div>
  <script type="text/javascript">
   $(document).ready(function(){
    $('#jqAjaxBtn').toggle(
     function(){
      var imgSrc = $(this).next().find('.logo').attr('data-src');
      $(this).next().find('.logo').attr('src', imgSrc);
      $(this).attr('value','再玩一次 O(∩_∩)O~');
     },
     function(){
      $(this).next().find('.logo').attr('src', 'blank.gif');
      $(this).attr('value','jQuery 异步加载图片');
     }
    );
   });
  </script>
 </div>
 <!-- E jqAjax -->
 
 <!-- S jsAjax -->
 <div id="jsAjax" class="box">
  <input type="submit" value="JavaScript 异步加载图片" id="jsAjaxBtn" />
  <div class="picBox">
   <img data-src="logo.png" src="blank.gif" alt="" class="logo" />
  </div>
  <script type="text/javascript">
   window.onload = function(){
    document.getElementById('jsAjaxBtn').onclick = jsToggle;
   }
   function jsToggle(){
    var jsImgTag = document.getElementById('jsAjax').getElementsByTagName('img')[0];
    var jsImgDataSrc = jsImgTag.getAttribute('data-src');
    var jsImgSrc = jsImgTag.getAttribute('src',2);
    if ( jsImgSrc == 'blank.gif' ){
     jsImgTag.setAttribute('src',jsImgDataSrc);
     document.getElementById('jsAjaxBtn').setAttribute('value','再玩一次 O(∩_∩)O~');
    } else {
     jsImgTag.setAttribute('src','blank.gif');
     document.getElementById('jsAjaxBtn').setAttribute('value','JavaScript 异步加载图片');
    }
   }
  </script>
 </div>
 <!-- E jsAjax -->
</body>
</html>
时间： 2024-10-27 05:01:58

jQuery/JavaScript 实现的异步加载图片效果的相关文章

ajax异步加载图片实例分析_AJAX相关

本文实例讲述了ajax异步加载图片的方法.分享给大家供大家参考,具体如下: 图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效).如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的. 联系时下比较热门的,号称"无"刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动

ajax异步加载图片实例分析

本文实例讲述了ajax异步加载图片的方法.分享给大家供大家参考,具体如下: 图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效).如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的. 联系时下比较热门的,号称"无"刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动

模仿SDWebImage实现异步加载图片

模仿SDWebImage实现异步加载图片 SDWebImage想必大家都不陌生吧,要实现它的图片异步加载功能这个还是很简单的. 注意:此处我只实现了异步加载图片,并没有将文件缓存到本地的打算哦:) 源码: UIImageView+YXImageView.h // // UIImageView+YXImageView.h // PicDemo // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <UIKit/UIKit.h>

Android中如何异步加载图片

研究了android从网络上异步加载图像,现总结如下: (1)由于android UI更新支持单一线程原则,所以从网络上取数据并更新到界面上,为了不阻塞主线程首先可能会想到以下方法. 在主线程中new 一个Handler对象,加载图像方法如下所示 private void loadImage(final String url, final int id) { handler.post(new Runnable() { public void run() { Drawable drawable =

ios通过按钮点击异步加载图片

  本文给大家汇总了几种IOS中实现异步加载图片的方法,十分的简单实用,有需要的小伙伴可以参考下. 比较原始的方法: 代码如下: AsyncImageView.h: #import @interface AsyncImageView : UIView { NSURLConnection* connection; NSMutableData* data; } - (void)loadImageFromURL:(NSURL*)url; @end AsyncImageView.m: #import "

Android 异步加载图片的实例代码_Android

异步加载图片的主要流程是进行判断缓存中是否存在图片,如果存在则直接返回,如果不存在则进行下载并进行缓存. 以下是建立一个异步下载类: 复制代码 代码如下: /** * User: Tom * Date: 13-5-13 * Time: 下午8:07 */public class AsnycImageLoader {     //定义一个HashMap进行存放缓存的Image key为String Value为一个弱引用的一个资源文件    // 图片 为了方便JAVA的回收    private

ios7-ios开发 UITableView异步加载图片，滑动时会很卡

问题描述 ios开发 UITableView异步加载图片,滑动时会很卡 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *cellIdentifier = @"cellIdentifier"; BrandTableViewCell *cell = (BrandTableViewCell *)[tab

listview异步加载图片并防止错位

android listview 异步加载图片并防止错位 网上找了一张图, listview 异步加载图片之所以错位的根本原因是重用了 convertView 且有异步操作. 如果不重用 convertView 不会出现错位现象, 重用 convertView 但没有异步操作也不会有问题. 我简单分析一下: 当重用 convertView 时,最初一屏显示 7 条记录, getView 被调用 7 次,创建了 7 个 convertView. 当 Item1 划出屏幕, Item8 进入屏幕时,

Android之ListView异步加载图片且仅显示可见子项中的图片

折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整实例都没看到,只有自己一点点研究了,总体感觉 android 下面要显示个图片真不容易啊. 项目主要实现的功能: 异步加载图片 图片内存缓存.异步磁盘文件缓存 解决使用 viewHolder 后出现的图片错位问题 优化列表滚动性能,仅显示可见子项中的图片 无需固定图片显示高度,对高度进行缓存使列表滚