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

原文 

最近写公司的项目的时候遇到一个关于图片加载的问题，所做的页面是一个商城的商品列表页，其中需要显示商品图片，名称等信息，因为商品列表可能会很长，所以其中图片需要滑到可以显示的区域再进行加载。
首先我的图片加载插件使用的是jquery的lazyload，
**一般情况下：**
使用lazyload，只需要引入相关文件（当然jquery也要提前引入）
<script src="../js/jquery.lazyload.js"></script>
然后在HTML的img标签中加入类名：lazy，图片的地址使用：data-original = “XXXXXXXXX”，最后再js中加上
$(function(){
    $("img.lazy").lazyload({
        effect: "fadeIn",container: $("#lazycontainer")
    }); 
})

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

ajax+lazyload时lazyload失效问题及解决的更多相关文章

  1. 利用原生JS实现懒加载lazyLoad的三种方法总结

    加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64、雪碧图等;懒加载也是其中一种,这篇文章主要给大家介绍了关于利用原生JS实现懒加载lazyLoad的三种方法,需要的朋友可以参考下

  2. Vue lazyload图片懒加载实例详解

    本文通过实例代码给大家介绍了Vue lazyload图片懒加载的相关知识，通过导入配置等操作src/main.jswenj ,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

  3. 详解jQuery lazyload 懒加载

    Lazy Load是一个用 JavaScript 编写的jQuery插件. 它可以延迟加载长页面中的图片. 本文对它进行实例介绍，具有很好的参考价值，下面跟着小编一起来看下吧

  4. Fragment 占位组件不生成标签与路由组件lazyLoad案例

    这篇文章主要为大家介绍了Fragment 占位组件不生成标签与路由组件lazyLoad案例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  5. 深入研究jQuery图片懒加载 lazyload.js使用方法

    这篇文章主要介绍了jQuery图片懒加载 lazyload.js使用方法，通过设置临界点,占位符,设置事件来触发加载等等来讲解lazyload.js的使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

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

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

  7. Angular中使用me-lazyload实现图片懒加载

    当js监听到该图片元素进入可视窗口时，将自定义属性中的地址写到src属性中，达到懒加载的效果。将me-lazyload.js引入需要的工程即可。使用首先需要明确的是，me-lazyload是一个指令。[1]依赖注入将me-lazyload注入祖先module或者需要使用的module。或者[2]属性替换将图片的src替换成lazy-src。

  8. 前端微服务化：拆分大型 Angular 应用的四种策略

    上一个月，我们花了大量的时间不熂设计方案来拆分一个大型的Angular应用。从使用Angular的Lazyload到前端微服务化，进行了一系列的讨论。过去的几周里，作为一个“专业”的咨询师，一直忙于在为客户设计一个Angular拆分的服务化方案。

  9. jquery – Lazy Loading in Flexslider

    解决方法我在滚动过程中实现了一个懒惰的负载.与此处提出的其他解决方案相比,该解决方案对于大型收藏来说效果更好.在初始化期间,它仅加载前5个图像,然后为每个动画加载3张图像.和javascript代码：

  10. jQuery LazyLoad不加载图像直到滚动

    jQueryLazyLoad不会在打开页面的可见部分加载图像，直到我滚动页面，即使在1px。当我滚动页面所有的工作正确更新：CoffeScript但是$.resize()仅在页面加载时从浏览器的控制台输入才有用解决方法您的图像必须设置宽度和高度。

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部