图像加载后在 Knockout.js 中淡入容器元素

Posted 2023-03-27

【中文标题】图像加载后在 Knockout.js 中淡入容器元素

【英文标题】：Fading in container elements in Knockout.js after image has loaded

【发布时间】：2018-06-16 23:00:26

【问题描述】：

我有一个由 Knockout.js 生成的图像和一些文本。文本会立即显示，而图像需要更长的加载时间。

我想在容纳每个图像/文本对的容器上有一个类，当图像完成加载时，然后切换该类并使图像/文本对同时淡入。

我知道有一个 afterRender 回调，我很难编写被调用以定位元素和操作类的函数。

http://jsfiddle.net/ClydeGrey/mfjv5j2c/4/

function SomeModel() 
  this.Firstname = ko.observable();
  this.Lastname = ko.observable();
  this.fadeIn = ko.observable();



function SomeViewModel() 
  var self = this;

  this.ArrayOfModels = ko.mapping.fromJS([]);
  this.dataArray = new Array;

  this.GetModelsByAjax = function() 
    $.ajax(
      type: 'POST',
      url: '/echo/json/',
      data: 
        json: JSON.stringify([
            loaded: false,
            img: "https://source.unsplash.com/random",
            Firstname: "Bob",
            Lastname: "Smith"
          ,
          
            loaded: false,
            img: "https://source.unsplash.com/user/erondu",
            Firstname: "Ted",
            Lastname: "Smith"
          ,

          
            loaded: false,
            img: "https://source.unsplash.com/user/erondu/1600x900",
            Firstname: "Jim",
            Lastname: "Gump"
          
        ]),
        delay: 0
      ,
      context: this,
      success: function(data) 
        for (var x = 0; x < data.length; x++) 
          self.dataArray.push(data[x]);
        
        /* self.dataArray.push(data); */
        console.log(self.dataArray);
        console.log(typeof(self.dataArray));
        console.log(data);
        console.log(typeof(data));
        self.SuccessfullyRetrievedModelsFromAjax(self.dataArray);
      ,
      dataType: 'json'
    );
  ;

  this.SuccessfullyRetrievedModelsFromAjax = function(models) 
    ko.mapping.fromJS(models, self.ArrayOfModels);
  ;


ko.applyBindings(new SomeViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="click: GetModelsByAjax">Go</button>
<div data-bind="template: name: 'model-template', foreach: ArrayOfModels"></div>

<script id="model-template" type="text/html">
  <div data-bind="css:  fadeIn: loaded() === true ">
    <div data-bind="text: Firstname"></div>
    <div data-bind="text: Lastname"></div>
    <img   data-bind="attr:  src: img ">
  </div>
</script>

【参考方案1】：

您已经有一个 loaded 属性，它被初始化为 false 并且是可观察的。我们将通过两种方式使用此属性：

在 css 绑定中，将 is-visible 类添加到我们可以设置样式的 img + 标签包装器中 在event 绑定中，设置<img> 标记触发load 事件时的值。

您的新模板，没有任何其他更改：

<div class="Img" data-bind="css:  'is-visible': loaded ">
    <div data-bind="text: Firstname"></div>
    <div data-bind="text: Lastname"></div>
    <img    
          data-bind="attr:  src: img , 
                     event:  load: loaded.bind($data, true) ">
</div>

css 用于淡入淡出，您可以根据自己的喜好更改：

.Img 
  opacity: 0;
  transition: opacity 1s ease-in-out;


.Img.is-visible  opacity: 1; 

在您的小提琴的更新版本中：http://jsfiddle.net/L7cn6y5r/