关键词：
【中文标题】如何在 Shopify 上延迟加载图片？【英文标题】：How do I lazy load images on Shopify? 【发布时间】：2021-04-04 23:16:22 【问题描述】：我需要通过lazyload加载所有shopify图片。
我尝试了很多时间，但还没有成功。
谁能帮我解决这个问题。
【问题讨论】：
您需要使用任何第 3 个 JS 库来按需加载图像，大多数 Shopify 默认和付费主题已经具有相同的 JS 库。 【参考方案1】：您需要添加延迟加载脚本和相同的类。
您可以按照以下步骤操作：
第 1 步：将延迟加载脚本添加到 Shopify 商店
从您的 Shopify 后台，转到在线商店 > 主题。
找到您要编辑的主题，然后点击操作 > 编辑代码。
在Layouts目录下，点击themes.liquid在在线代码编辑器中打开。
在在线代码编辑器中，在关闭标签之前添加以下代码。
'//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag
点击保存。
第 2 步：指示要延迟加载的图像
将延迟加载类添加到应该延迟加载的图像。另外，将src属性改为data-src。
之前
<img src="image.jpg" />
之后
<img class="lazyload" src="img path" data-src="image.jpg" />
第 3 步：在 JS 文档中实例化延迟加载
将以下 Javascript 代码添加到 Assets 目录中的 .js 或 .js.liquid 文件中，您就完成了。
$(document).ready(function()
$("img.lazyload").lazyload();
);
【讨论】：
Shopify：如何在集合模板上显示特定集合
】Shopify：如何在集合模板上显示特定集合【英文标题】：Shopify:Howtoshowspecificcollectiononthecollectiontemplate【发布时间】：2018-09-1621:02:05【问题描述】：我正在编辑Section/collection-template.liquid文件（此文件由模板文件“collection.liquid”... 查看详情
如何在 shopify 产品页面上添加自定义文本框字段
】如何在shopify产品页面上添加自定义文本框字段【英文标题】：Howtoaddcustomtextboxfieldonshopifyproductpage【发布时间】：2021-03-2519:43:00【问题描述】：我需要在shopify产品页面上添加自定义文本框字段。我的要求是在产品页面上添加文... 查看详情
延迟加载
延迟加载图片延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器... 查看详情
Shopify API Python 使用 Python API 上传多张图片
】ShopifyAPIPython使用PythonAPI上传多张图片【英文标题】：ShopifyAPIPythonMultiplePicturesuploadwithPythonAPI【发布时间】：2018-11-0209:12:24【问题描述】：我正在尝试使用PythonAPI在Shopify上添加多张图片，但是我无法将2张图片上传到一个产品。... 查看详情
如何在我的 Shopify 网站上居中产品标题和定价信息？ [复制]
】如何在我的Shopify网站上居中产品标题和定价信息？[复制]【英文标题】：HowDoICenterProductTitleAndPricingInfoOnMyShopifyWebsite?[duplicate]【发布时间】：2021-08-3020:37:55【问题描述】：我试图弄清楚如何将我在我的网站(SafeGuardLenz)上销售的... 查看详情
js图片延迟加载
...主要是为了提升网站的性能，节省流量（网站和用户）。如何实现如果的开发的时候，实现的方式其实有很多相应的插件。原生的js来实现。我们就是站在学习的角度，使用原生的js来实现这个效果。实 查看详情
在android（初级）的Listview上延迟加载图像？ [复制]
】在android（初级）的Listview上延迟加载图像？[复制]【英文标题】：LazyLoadimagesonListviewinandroid(BeginnerLevel)?[duplicate]【发布时间】：2011-02-2402:51:23【问题描述】：可能重复：Android-HowdoIdoalazyloadofimagesinListView我正在使用自定义适配器... 查看详情
网站优化--图片的预加载与懒加载（上）
1、延迟加载即懒加载，主要目的是作为服务器前端的优化，减少请求数或延迟请求数，在一些图片非常多的网站中非常有用，当图片位置进入到可视区的时候才会被加载，这样对于含有很多图片的比较长的网页来说，可以加载... 查看详情
在 Shopify 中添加自定义多图像部分
】在Shopify中添加自定义多图像部分【英文标题】：Addcustommulti-imagesectioninShopify【发布时间】：2019-12-1309:29:51【问题描述】：我正在尝试在Shopify中添加一个自定义部分，以允许用户上传2张宣传图片。我是新手，但我设法为1张图... 查看详情
延迟加载 UICollectionView 图像
】延迟加载UICollectionView图像【英文标题】：LazyLoadingUICollectionViewImages【发布时间】：2016-06-1214:35:39【问题描述】：UICollectionView的每个单元格都有一个UIImageView，我需要加载它们，以便在您滚动浏览集合时它们正确显示，并且每... 查看详情
如何禁用分离实例关系上的 SQLAlchemy 延迟加载？
】如何禁用分离实例关系上的SQLAlchemy延迟加载？【英文标题】：HowtodisableSQLAlchemylazyloadsondetachedinstancerelationships?【发布时间】：2021-04-1418:12:07【问题描述】：我使用SQLAlchemy在Python中开发了一个类似JDO的FetchGroup功能，以控制对象... 查看详情
实现图片的预加载和懒加载
延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。那么延... 查看详情
如何在 Android 的 ListView 中延迟加载图像
】如何在Android的ListView中延迟加载图像【英文标题】：HowtolazyloadimagesinListViewinAndroid【发布时间】：2010-10-0705:13:54【问题描述】：我正在使用ListView来显示一些图像以及与这些图像相关联的标题。我正在从互联网上获取图像。有... 查看详情
如何在 UITableView 中高效加载图片？
】如何在UITableView中高效加载图片？【英文标题】：HowtoefficientlyloadimagesinUITableView?【发布时间】：2014-01-0303:10:37【问题描述】：我有一个UITableView，其中包含大量图像。每个单元格将有5张图片，这些图片是从Parse.com随机加载的。... 查看详情
Shopify：如何显示每个位置变体的库存数量？
】Shopify：如何显示每个位置变体的库存数量？【英文标题】：Shopify:Howtodisplayinventoryquantitiesofavariantperlocation?【发布时间】：2020-08-2408:00:11【问题描述】：是否可以在产品页面上显示每个位置的产品变型的库存数量？由于此信息... 查看详情
`content_for_layout` 如何在 shopify 中加载内容？
】`content_for_layout`如何在shopify中加载内容？【英文标题】：Howdoes`content_for_layout`loadcontentinshopify?【发布时间】：2019-03-2917:58:03【问题描述】：我正在尝试了解shopify。在首次亮相的主题，theme.liquid布局文件中我找到了这段代码conte... 查看详情
如何在 Shopify 中显示元字段
】如何在Shopify中显示元字段【英文标题】：HowtoDisplayaMetafieldinShopify【发布时间】：2013-02-2817:16:17【问题描述】：我们有一组产品希望免费送货。为了做到这一点，我将它们的重量设置为0，并为0磅创建了基于重量的运输。这样... 查看详情
图片延迟加载
图片延迟加载jQuery插件：jQuery.lazyload $(function(){$(‘img.lazy‘).lazyload({//container:$(‘.product-list‘),//对指定标签对象内的图片实现效果，表示在此标签中滚动时，触发加载（注意：如果容器未设置height和overfload:auto，那么会默认... 查看详情