ajax+lazyload时lazyload失效问题及解决

tigerZH 发布于2019-08-20 18:37 / 2116人阅读

摘要：最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。

最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。
首先我的图片加载插件使用的是jquery的lazyload，
**一般情况下：**
使用lazyload，只需要引入相关文件（当然jquery也要提前引入）

然后在HTML的img标签中加入类名：lazy，图片的地址使用：data-original = “XXXXXXXXX”，最后再js中加上

$(function(){
    $("img.lazy").lazyload({
        effect: "fadeIn",
        container: $("#lazycontainer")
    }); 
})

这里设置了图片加载进来显示是渐现的效果，以及包裹整个商品列表的容器container

GPU云服务器云服务器 lazyload jquery lazyload js 云服务器问题及解决方法 ajax 后js失效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84779.html

ajax+lazyload时lazyload失效问题及解决

摘要：最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。首先我的...

KitorinZero 2019-08-02 15:57 评论0 收藏0
图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
墨瞳漫画h5一期 vuejs总结

摘要：欢迎体验提墨瞳漫画这里踩的坑主要是组件的重用。这样可以防止图和图片大小不一样引起的页面跳动继而导致的加载图片时机错误。跨域时，会先发送一个空的请求来查看接口是不是支持跨域，再发送一次真实请求。前言博主也是vuejs萌新，公司仅我一个前端，收到做h5的需求后，马上想到要用下vuejs，于是说服领导，开始慢慢钻研，现在记录一下踩到的坑。这些坑主要是在一些组件的使用上，其它的只要好好看官...

王岩威 2019-08-20 11:10 评论0 收藏0
iscroll.js和lazyload.js的兼容（滑动时，缓冲好的图片不更新）

摘要：另外我的这段代码可谓神来之笔，大家好好看看这一步很重要，否则图片不能完成缓冲效果原理在正在加载完后，就设置为可以缓冲。加载图片使用的效果淡入在离可视区以内的图片也开始加载了，提升体验度取消等默认不可点击效果解决。以前在做项目的时候，把jquery.lazyload.js和iscroll.js一起使用，当滑动页面的时候，iscroll的滑动效果出来了，但是图片懒加载的效果没出来，主要是...

Cheng_Gang 2019-08-21 11:39 评论0 收藏0