javascript – 显示“加载…”图像的好方法是什么？

2019-08-27 08:34:38 阅读：224 来源： 互联网

我正在使用一个div,里面有任意数量的img元素.现在,每个img都有以下CSS：

#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

并且图像可以循环显示,并具有依次显示和隐藏它们的功能.但是,在加载每个图像时,我想显示“加载…”图像.我想使用JavaScript / jQuery将每个不完整图像的源交换为“loading …”图像,同时仍然允许它加载.什么是精益和卑鄙的方式来做到这一点？

解决方法:

$(function(){
   $('<img>').attr('src','loading.gif'); // preload the "loading" image.

   $('#content > img').each(function(){
       var original = this.src;
       var $this = $(this);
       $this.attr('src','loading.gif'); // swap to loading image.
       $('<img>').attr('src',original)// pre-load original.
              .load(function(){
                 $this.attr('src',original); // swap it back when pre-load is done. 
              });
   })
});

crazy example

标签：image-loading,javascript,jquery
来源： https://codeday.me/bug/20190827/1739183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 显示“加载…”图像的好方法是什么？