如何采集延迟加载图片（采集异步加载图片）

最新推荐文章于 2024-04-26 15:58:24 发布
最新推荐文章于 2024-04-26 15:58:24 发布
阅读量190 收藏
点赞数
文章标签： 经验分享 大数据 爬虫 html 内容运营
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keydatas/article/details/131009514
版权

一般网页的图片地址是在img标签的src属性，这种数据采集器一般都能识别获取。

<img src="图片地址">

但是有些网站为了加快访问网页速度，延迟加载图片，会将真正的图片地址设置在自定义命名的属性，因为自定义属性命名方式各种各样的没有固定标准，可能会导致文章采集器智能识别获取图片失败的。

 自定义命名属性例如：

<img src="占位小图片地址" origin-pc-src="真实图片地址">

<img src="占位小图片地址" lazy-loading-src="真实图片地址">

我们可以在浏览器（例chrome，火狐Firefox）打开对应的文章页面，右键查看网页源代码，然后用搜索功能（ctrl+F5）查看图片真实地址；


例如查找到图片地址在 lazy-loading-src 属性，打开简数采集器文章详情提取器，content字段的【字段数据处理】--》【高级提取】--》在【图片链接属性】填写 lazy-loading-src，最后记得保存，就可以采集到对应的图片了。

 

datascome
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
异步加载图片
刚哥的博客
09-13 663
使用背景： 在数据加载中，如ajax请求加载中，如果数据量过大，有时会产生500错误信息，如果是这个原因，采用的策略是： 加载数据的时候，只加载除图片以外的其他信息，图片信息通过图片的请求路径加载，具体操作步骤如下： 1）设置img的src 数据信息为连接地址 <img class="item-img" v-bind:src="'../Goods/GetProductImg?proid='+ite.pro_id" /> 2）后台中使用异步调用的方式请求图片信息，这里必
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
12-04
看个例子： 代码如下: <input type=”button” name=”” value=”载入图片” onclick=”addImg(‘tt.jpg’)” /> [removed] <!– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } //–> [removed] 当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载
JavaScript：图片异步加载 onLoad函数
ilovewangjie990502的博客
08-11 1709
由于业务中有个需求，有个选项是让用户点击查看大图，这个大图应该带遮罩层显示在屏幕正中间，但是由于图片是挂载在服务器上的图片，所以加载图片是异步的，即图片并不能一次性加载完毕，这就导致图片即使加载完成，也无法实现屏幕居中。 后来发现可以在img标签里实现onLoad函数，当图片完毕后，让图片替换之前的默认图片。 <img src={imgLoading} onLoad={e => model.imageLoadHandler(e)}/> imageLoadHandler = e =&gt
在网页中用img标签实现php异步执行
倚竹幽篁
03-17 964
最近写了个小网站，需要统计页面访问记录，于是直接把index.html改成index.php文件，然后内嵌读写数据库的php代码（php7.0）。 比较简单，如下： &lt;?php $con = new mysqli('xxx.xxx.xxx.xxx', 'root', '123456', 'db_name'); $con -&gt; query('set names utf8;'); ...
IMG元素加载行为详解
巴黎的妖
01-06 3586
一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　   在《JS魔法堂：jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异步执行的优化方案，本文打算对img元素的加载行为进行更深入的探讨。   二、资源加载的相关属性和事件　　　　　　　　　　　　　　　　　　   资源加载首先当然是确定资源位置的 src属性 、随之就是资源加载成功与否的
<img src="">标签通过js异步加载图片
abfdada的博客
01-09 8077
主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码: 标签: "getHead(this,url);" src="../../static/xxx/xxx/head.png" > %--这里注意 1,src写在 onload后面 2,请给src一个默认的图片路径,不能直接src="" --%> js: function getHead(obj
JS实现图片的异步加载
热门推荐
webnoob
10-21 1万+
1.概述异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。2.基本形式<script> function loadImage(id,url,callback)
async-img:异步和惰性图像加载库
05-16
异步图 异步和惰性图像加载库 演示版 初始化异步加载程序 AsyncImage . new ( < selector> , < options> ); selector -将被异步修饰的图像元素（有效的jQuery选择器） options binds -将在其上加载图像的事件数组 type字符串（ click ， mouseover ） target事件目标（有效的jQuery选择器） delay -毫秒事件的数目将被延迟（dafault： 0 ） throttle -每x毫秒最多触发一次事件（故障： 300 ） conditions -指定要加载图像的conditions对象 visible仅当元素未隐藏时才加载图像（默认值： false ） within_bounds仅当元素在视口内时才加载图像（默认值： false ） custom -回调用户定义的函数，返回
html异步加载图片,javascript-img异步加载图片
weixin_31236309的博客
06-05 1546
在开发中,我们经常有异步加载图片的请求,然后在图片加载成功后做一些操作,一般我们通过onload方法来实现.网上有两种写法,大家可以先看一下(注:logo.jpg是张本地图片):例子1:var img = new Image();img.src = "logo.jpg";img.onload = function () {alert("image is loaded");};document.bo...
【学习笔记】图片异步加载
weixin_30347335的博客
07-03 52
在做重构的时候，经常会做一些以图片为主的页面，背景啊，或者某些元素都是比较高分辨率的大图，这样加载起来就会很浪费时间，尤其是背景的大图，如果直接加载的话会逐行显示，体验会很不好。 于是我想到了能否在开始的时候预加载一张低分辨率的图片，然后等原图加载完毕后进行替换，这时候onload和complete就出现在我脑海里了，代码如下 <!doctype html&gt...
使用promise解决图片异步加载
weixin_45685544的博客
09-28 1633
promise解决图片异步加载 解决多张图片异步加载 function Create(url) { return new Promise((resolve, reject) => { let oimg = new Image();//创建img标签 oimg.onload = () => { ...
ajax异步加载图片实例分析
10-22
主要介绍了ajax异步加载图片的方法,结合实例形式较为详细的分析了ajax图片异步加载的原理与相关实现技巧,需要的朋友可以参考下
Android 异步加载图片的实例代码
09-05
异步加载图片主要是利用多线程进行下载、图片弱引用缓存和Handler操作UI进行实现的。
Android ListView异步加载图片方法详解
09-02
主要介绍了Android ListView异步加载图片方法,结合实例形式较为详细的分析了ListView异步加载图片的原理与相关实现技巧,需要的朋友可以参考下
ios通过按钮点击异步加载图片
09-03
本文给大家汇总了几种IOS中实现异步加载图片的方法，十分的简单实用，有需要的小伙伴可以参考下。
Android实现异步加载图片
01-05
今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片都是使用了AsynTask这个API,继续这个类,实现起来非常简单也很方便.在doInBackground()方法里实现下载...
【经验分享】MySQL集群部署一：主从模式
最新发布
weixin_43246215的博客
04-26 644
mysql主从集群部署
ELK日志系统的搭建
adminstate的博客
04-23 1065
ELK日志系统搭建
ElasticSearch 入门学习
灰熊
04-23 791
ElasticsSearch 是一个分布式的实时文档存储，每个字段可以被索引与搜索也是一个分布式实时分析搜索引擎也是一个能胜任上百个服务节点的扩展，并支持 PB 级别的结构化或者非结构化数据。
unity 异步加载图片集
02-01
在Unity中，异步加载图片集可以通过使用协程和Unity的AssetBundle系统来实现。下面是一个简单的示例代码，演示了如何异步加载图片集： ```csharp using System.Collections; using UnityEngine; public class ImageLoader : MonoBehaviour { public string bundleURL; // 图片集的AssetBundle路径 public string assetName; // 图片集的Asset名称 private AssetBundle bundle; IEnumerator Start() { // 加载AssetBundle using (WWW www = new WWW(bundleURL)) { yield return www; bundle = www.assetBundle; } // 异步加载图片集 AssetBundleRequest request = bundle.LoadAssetAsync(assetName, typeof(Sprite[])); yield return request; // 获取加载的图片集 Sprite[] sprites = request.asset as Sprite[]; // 使用加载的图片集 foreach (Sprite sprite in sprites) { GameObject obj = new GameObject(); obj.AddComponent<SpriteRenderer>().sprite = sprite; } // 卸载AssetBundle bundle.Unload(false); } } ``` 在上述代码中，首先使用WWW类异步加载指定路径的AssetBundle。然后，使用AssetBundle.LoadAssetAsync方法异步加载指定名称的图片集。加载完成后，可以将加载的图片集用于创建游戏对象或其他操作。最后，使用bundle.Unload方法卸载AssetBundle。 请注意，上述代码仅为示例，实际使用时需要根据具体情况进行适当修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值